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指令的处理方式发生了变化。 migration notes for AngularJS 1.4简要介绍了此更改。有关更改的更详细说明，请参阅commit message：

使用ngOptions时：该指令应用代理键作为   <option>元素的值。此提交更改实际字符串   用作代理键。我们现在存储一个由...计算的字符串   在选项集合中的项目上调用hashKey;以前呢   是集合中项目的索引或键。

（这与未知选项值的方式一致   在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>

Answer 2

在 ngOptions 标题下，查看migration guide对这一重大变化的模糊解释。

由于7fda214c，当ngOptions在其中呈现选项值时 DOM，生成的HTML代码是不同的。通常这不应该但是，如果您的代码依赖，则会影响您的应用程序检查元素的value属性（即ngOptions 生成）然后一定要read the details。

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

2 个答案: