ng-options how to set first select always blank

Related searches

I am using angularjs in a project and in which I am using ng-options for generating .

Initially when the pages reload and no option element is selected the html generated like below:

<select size="3" ng-model="item" ng-options=" for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>

But when I select an element (ex. Item 2) the first blank select is gone. I know its happening as ng-model is being set by select value. But I want first select always blank so that user can reset the filter.

Thanks in advance.

This will do the work for you:

<select size="3" ng-model="item" ng-options=" for s in itemlist">
    <option value="">Select Option</option>

AngularJS: Adding a user-friendly default option to ng-options, The first <select> will generate the <option value="?"> element with a blank label. The second <select> does not generate a blank option. Instead, it selects the default "-- please choose an animal --" option we provided. It always gives this option a blank label, which can be confusing to your users. It turns out there is a way to provide a more descriptive default option with a user-friendly label. This will be selected any time the variable in ng-model doesn't match an option in the ng-options. Leave the ng-options directive as-is, and add a single option

For anyone out there that treat "null" as valid value for one of the options (so imagine that "null" is a value of one of the items in typeOptions in example below), I found that simplest way to make sure that automatically added option is hidden is to use ng-if.

<select ng-options="option.value as for option in typeOptions">
    <option value="" ng-if="false"></option>

Why ng-if and not ng-hide? Because you want css selectors that would target first option inside above select to target "real" option, not the one that's hidden. It gets useful when you're using protractor for e2e testing and (for whatever reason) you use by.css() to target select options.

Kevin - Sưu Tầm

Tutorial: Why Angular Dropdown Automatically Adds an Empty Value, In this code, we specify an initial value for selectedName . On the ng-init we assign the value 0 as selected value for the dropdown. By default ng-options will set the selected value is 0 indexed value. If you want to set the different value as default value then you have to specify manually with the help of ng-model directive. We have bind the select element with ng-model and named as selecteddegree. Now we can easily set the custom selected element value from our controller.

You can forgo using the ng-options and use ng-repeat instead and make the first option blank. See example below.

<select size="3" ng-model="item">
    <option value="?" selected="selected"></option>
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{}}</option>

AngularJS: labelled empty option in select box when using ng-options, All you need to do is add the labelled blank option in the select box, a blank option at all, remove the option tag and set Ctrl.selected to be� I’m using ng-options to generate the options for select boxes in AngularJS. By default, when a selected value is not defined, Angular adds a blank option, without a label. I wanted to give this blank option a label, e.g. “Select something”, but couldn’t see how to do it.

It appears that your best option would be to have the blank item included as the first item in itemlist.

ngOptions, When an item in the <select> menu is selected, the array element or object a single hard-coded <option> element, with the value set to an empty string, can be In the first example, the ngModel value is items[0] and the track by expression� AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

The solution above will corrupt the model with junk data. Please use the directive to reset the model in the right way JS: Select Option

 .directive('dropDown', function($filter) {
    return {

        require: 'ngModel',
        priority: 100,
        link: function(scope, element, attr, ngModel) {

            function parse(value) {

                if (value) {

                    if(value === "")
                        return "crap"
                        return value;

                } else {



Why does AngularJS include an empty option in select , AngularJS is a Javascript framework containing several built-in observed that the first option in the select dropdown is always empty. The easiest way to correct this error is to reference a valid value from the ng-option list. empty option will disappear and the default selected value will be set to C++. Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option. See example below for demonstration. Choosing between ngRepeat and ngOptions

The select tag in HTML is used to create a dropdown list of options which can be selected. The option tag contains the value that would be used when selected. The default value of the select element can be set by using the ‘selected’ attribute on the required option. This is a boolean attribute.

Angular Select Has an Empty Value. Often, I'm faced with this problem while implementing a select (dropdown) in Angular. Here, I have tried to walk through why Angular adds an empty value at the

The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false.

  • My hero! I've been struggling with ng-options for quite a while now having the exact same problem as @arnold had. This is the only permanent and solid solution. Thank you!
  • Thanks, this eluded me for a while
  • onChange directive is not firing if you select this option.
  • This doesn't work while using the select box as a filter criteria. As when you want to reset the filter, on choosing 'Select Option', it doesn't reset the results.
  • ng-options is the 'angular way' for select elements and (once used correctly) adds a lot of facility that ng-repeat doesn't.
  • @rushkeldon : Straight from the AngularJS documentation: "In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result."
  • @m.e.conroy The same link also states (it might have been updated since you initially posted it, though) that ng-options is more efficient - faster and uses less memory, because it doesn't create a new scope for each item in the list.
  • I know this is old but, it is a valid solution for some scenarios, regardless of the micro-performance optimizations for your page, and doesn't deserve the down vote. The inclusion in the documentation is nod toward that fact and there are still some niche cases where ng-repeat on a select is just more straight forward.
  • that creates two blank select when dom initialize.