javascript - How to suppress variable type within value attribute using ng-options? -


running angularjs 1.4.0-rc.1 value within ng-options loop contains type of variable.

see 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 option.label option in options">    </select>  </div>

this generates html code looks this:

<select ng-options="option.id option.label 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 value prefixed type of variable, i.e. number:? in previous versions of angularjs (e.g. current stable 1.3.15) value attributes filled expected values of 1, 2 , 3.

so bug in 1.4.0-rc.1 or cases need handled differently now?

obviously there change in how ngoptions directive handled. change briefly explained in migration notes angularjs 1.4. more detailed description of changes can found in commit message:

when using ngoptions: directive applies surrogate key value of <option> element. commit changes actual string used surrogate key. store string computed calling hashkey on item in options collection; index or key of item in collection.

(this in keeping way unknown option value represented in select directive.)

before 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 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 application code relied on value, shouldn't, need modify application accommodate this. may find can use track by feaure of ngoptions provides ability specify key stored.

this means need use track by same result before. fix example in question needs 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 option.label option in options track option.id">    </select>  </div>


Comments