如何使用ng-options抑制value属性中的变量类型？

Question

运行AngularJS 1.4.0-rc.1 ng-options循环中的值包含变量的类型.

请参阅以下代码:

<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>

这会生成如下所示的HTML代码:

<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>

为什么值的前缀是变量的类型,即number:？在AngularJS的早期版本(例如,当前稳定的1.3.15)的value属性都充满了预期值1,2和3.

那么这是1.4.0-rc.1中的一个错误还是现在需要以不同的方式处理这些情况？

Answer 1

显然,ngOptions指令的处理方式发生了变化.AngularJS 1.4的迁移说明中简要介绍了此更改.可以在提交消息中找到有关更改的更详细说明:

使用时ngOptions:该指令应用代理键作为<option>元素的值.此提交更改用作代理键的实际字符串.我们现在存储一个字符串,该字符串通过调用hashKeyoptions集合中的项目来计算; 以前它是集合中项目的索引或键.

(这与select指令中表示未知选项值的方式一致.)

在您看到之前:

<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>

现在它将是这样的:

<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>

如果您的应用程序代码依赖于该值,而不应该这样,那么您将需要修改您的应用程序以适应这一点.您可能会发现可以使用该track by功能,ngOptions因为这样可以指定存储的密钥.

这意味着您现在需要使用track by以获得与以前相同的结果.要修复问题中的示例,它需要看起来像这样:

<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>