ngOptions in Angular 1.4 broke <select> placeholder values using ng-if

[erindru]

In Angular, you can specify a placeholder value for a <select> by doing something like so:

      <select ng-options="o.name for o in options" ng-model="model">
        <option value="">Please choose</option>
      </select>

This still works, however even when you choose an option in the list, the 'Please choose' placeholder still shows. To get around this, you could use an ng-if on the placeholder <option> to hide the option if a model value was selected, like so:

      <select ng-options="o.name for o in options" ng-model="model">
        <option ng-if="!model" value="">Please choose</option>
      </select>

However this no longer works in Angular 1.4, the placeholder no longer shows and the entire list is cleared if you choose one of the other options.

I have created a plunkr to demonstrate this, see here: http://plnkr.co/edit/NDXZLkGavwBU3Qg5YAtT

[ryanhart2]

Seems to break in 1.4.0-beta.6

This works in Firefox 38 & Chrome 43, but not IE 11
<option ng-hide="model" value="">Please choose</option>

This works in all three browsers above. Doesn't look great in IE but it works.
<option disabled value="">Please choose</option>

[erindru]

Thanks, I guess i'll use the disabled attribute for now. Is this considered a regression? I guess it has something to do with the refactoring around select and ngOptions, and ngIf creating a new scope

[erindru]

Actually, being able to use ng-if was very handy for the use-case when you could have a custom directive that contains a <select>, and then optionally have a placeholder element if the user specifies a "placeholder" attribute.
With this, the placeholder element always has to be present, and if the user doesnt specify some text for it then it just shows as a blank item in the list.

I guess I could try and remove it manually through DOM manipulation in the compile phase, but it would be nicer to be able to take care of it in the template like I used to be able to.

[ryanhart2]

Actually, this last worked correctly in 1.3.16

Since 1.4.0-beta.0 it has worked but with type errors "element.setAttribute is not a function".
This was due to ngOptions executing emptyOption.attr('selected', true) while emptyOption was an ngIf comment node [ "<!-- ngIf: !name -->" ].

Since commit #11275 in 1.4.0-beta.6, JQLite no longer attempts to set attributes on comment nodes, which is in line with JQuery (according to comments in #11038). The side effect of this commit is that this use case has stopped working altogether.

[scottmas]

Actually, this currently works if you use an ng-show instead of an ng-if. Once an option is selected from the dropdown, the placeholder element no longer shows up on the list. This is with 1.4.2

<select ng-options="o.name for o in options" ng-model="model">
     <option ng-show="!model" value="">Please choose</option>
</select>

[hoxu]

Angular 1.4.3 also suffers from this problem, and changing ng-if to ng-show is a viable workaround.