Running AngularJS 1.4.0-rc.1 the value within a ng-options
loop contains the type of the variable.
See the following code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js"> </script> <script> angular.module("selectOptionsTest", []). controller("SelectOptionsController", ["$scope", function($scope) { $scope.options = [ {id: 1, label: "Item 1"}, {id: 2, label: "Item 2"}, {id: 3, label: "Item 3"} ]; }]); </script> <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController"> <select ng-model="opt" ng-options="option.id as option.label for option in options"> </select> </div>
This generates HTML code which looks like this:
<select ng-options="option.id as option.label for option in options" ng-model="option" class="ng-pristine ng-valid ng-touched"> <option value="?" selected="selected"></option> <option value="number:1" label="Item 1">Item 1</option> <option value="number:2" label="Item 2">Item 2</option> <option value="number:3" label="Item 3">Item 3</option> </select>
Why is the value prefixed by the type of the variable, i.e. number:
? In previous versions of AngularJS (e.g. the current stable 1.3.15) the value
attributes are filled with the expected values of 1
, 2
and 3
.
So is this a bug in 1.4.0-rc.1 or do those cases need to be handled differently now?
In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.
Since February 2015 there has been a way to disable options in your ng-options tag. I found that using angular 1.4. 7, the syntax had changed from 'disable by' to 'disable when'. I found that the documentation has no example of disabling when the format is select as label disable when condition for item in items .
In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest. Essentially when you define the $scope property your select will bind to assign it the default value from your data array.
The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
Obviously there was a change in how the ngOptions
directive is handled. This change is briefly explained in the migration notes for AngularJS 1.4. A more detailed description of the changes can be found in the commit message:
When using
ngOptions
: the directive applies a surrogate key as the value of the<option>
element. This commit changes the actual string used as the surrogate key. We now store a string that is computed by callinghashKey
on the item in the options collection; previously it was the index or key of the item in the collection.(This is in keeping with the way that the unknown option value is represented in the select directive.)
Before you might have seen:
<select ng-model="x" ng-option="i in items"> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> <option value="4">d</option> </select>
Now it will be something like:
<select ng-model="x" ng-option="i in items"> <option value="string:a">a</option> <option value="string:b">b</option> <option value="string:c">c</option> <option value="string:d">d</option> </select>
If your application code relied on this value, which it shouldn't, then you will need to modify your application to accommodate this. You may find that you can use the
track by
feaure ofngOptions
as this provides the ability to specify the key that is stored.
This means that you now need to use track by
to get the same result as before. To fix the example in the question it needs to look like this then:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js"> </script> <script> angular.module("selectOptionsTest", []). controller("SelectOptionsController", ["$scope", function($scope) { $scope.options = [ {id: 1, label: "Item 1"}, {id: 2, label: "Item 2"}, {id: 3, label: "Item 3"} ]; }]); </script> <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController"> <select ng-model="opt" ng-options="option.id as option.label for option in options track by option.id"> </select> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With