Hard coded <option> causes error "TypeError: Cannot read property 'getOptionFromViewValue' of undefined"

[godza]

Hi, in documentation is stated that 'empty option' can be used when using ng-options. Here is direct quote

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

I used that in 1.3 very heavily and it worked flawlessly, but in 1.4 i'm getting error

TypeError: Cannot read property 'getOptionFromViewValue' of undefined

Just to be clear, here is the template i'm using

<select ng-options="option.id as option.name for option in selectable_options">
  <option value="">Choose an option</option>
</select>

Is this planed regression or a bug? If this is planed regression, is there a workaround for the thing i'm trying to accomplish?

[gkalpak]

I can't reproduce the error. Which version are you using. Ideally you should provide and live reproduction using CodePen, JSFiddle, Plnkr or a similar.

_{You should also use ngModel on the select.}

[godza]

Hi, i was using 1.4 rc and i built latest angular from git master, but it's the same error. Here is the plunkr but error thrown there is not the one you get when you're running from files on your computer

As you can see, the select is not populated with options.

http://plnkr.co/edit/l0SV6rcOeVufxJ2f6oNm?p=preview

[gkalpak]

I don't get any error. (Neither on my computer nor in the plnkr.)
ngOptions requires ngModel, so it won't populate your <select>, unless you have ngModel on it.

Updated plnkr

[lammel]

We are seeing the same issue in our application. But only in a particular situation (we pass the a model to a directive which in turn displays the select with the hardcoded empty option). Other usage of select with ng-options works fine (also with the hardcoded empty option).

We try to isolate the issue in a plunker for further analysis.

[godza]

@gkalpak i finally managed to reporoduce the problem, even on plunker.

The catch is that template of customSelect directive in my example needs to be loaded via templateUrl. In that case i see errors and list is not printed.

http://plnkr.co/edit/l0SV6rcOeVufxJ2f6oNm?p=preview

• If you edit select_template.html file and remove empty option it works
• if you copy/paste select_template.html content and paste it in template property of directive definition, it will work even with empty option

[bbasic]

Just to be thorough.
It will work in a situation where replace: true is not used.

plunker
Uncomment the line 27 in app.js to see the error.

[gkalpak]

Indeed it seems that the combination of templateUrl (instead of template) and replace: true results in no options being created.
I am not sure if this should be fixed though, considering that replace: true has been deprecated.

@petebacondarwin, wdyt ?

[godza]

@gkalpak even though it's deprecated it should be working properly until removed.

[marcelgwerder]

I think I have the same issue. I have a simple select with an additional custom directive that uses

$compile(element.contents())(scope); 

It only works if I either remove the empty option:

<select ng-options="country.code as country.title for country in countries" ng-model="selectedCountry" random-directive>
</select>

Or the custom directive:

<select ng-options="country.code as country.title for country in countries" ng-model="selectedCountry">
    <option value="">Please select...</option>
</select>

But both together throw a TypeError: Cannot read property 'getOptionFromViewValue' of undefined.

http://plnkr.co/edit/kIZqA67L1adub2f179Yj?p=preview

This worked with 1.3:

http://plnkr.co/edit/VA5NeFeTYExSb7jCtOYs?p=preview

[egervari]

Thank you thank you for the replace: true post. This solved my problem as well.

[Narretz]

Here's why it happens:
In a regular select, the elements add themselves as options to the selectCtrl. It also adds an element $destroy listener that removes the option and forces a render.
In a ngOptions select, the first element is extracted from the element, and compiled separately. Since it's not part of the document, it doesn't have a selectCtrl parent, and it doesn't get added.
If another directive compiles the select contents before ngOptions is linked, the option gets added. But when ngOptions runs it also gets removed from the DOM, and its destroy listener is called, which calls render, which delegates to ngOptions, which at this point doesn't have options set.
So the easy fix is simply to check if options are defined here: https://github.com/angular/angular.js/blob/1.4.6/src/ng/directive/ngOptions.js#L459
But the problem also raises some questions about the interop between ngOptions and select ...

[petebacondarwin]

https://github.com/angular/angular.js/blob/v1.4.6/src/ng/directive/ngOptions.js#L459

[petebacondarwin]

A workaround is to ensure that your random directive has a higher priority than the select and ngOptions directives: http://plnkr.co/edit/kIZqA67L1adub2f179Yj?p=preview