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

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

提问by Sebastian Zartner

Running AngularJS 1.4.0-rc.1 the value within a ng-optionsloop contains the type of the variable.

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

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:

这将生成如下所示的 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>

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 valueattributes are filled with the expected values of 1, 2and 3.

为什么值以变量的类型为前缀，即number:？在以前的 AngularJS 版本（例如当前稳定版 1.3.15）中，value属性填充有1,2和的预期值3。

So is this a bug in 1.4.0-rc.1 or do those cases need to be handled differently now?

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

回答by Sebastian Zartner

Obviously there was a change in how the ngOptionsdirective 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:

显然，ngOptions指令的处理方式发生了变化。AngularJS 1.4的迁移说明中简要解释了此更改。可以在提交消息中找到更详细的更改说明：

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 calling hashKeyon 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 byfeaure of ngOptionsas this provides the ability to specify the key that is stored.

使用时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 byfeure，ngOptions因为这提供了指定存储密钥的能力。

This means that you now need to use track byto get the same result as before. To fix the example in the question it needs to look like this then:

这意味着您现在需要使用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>

回答by skfd

See migration guidefor kind of obscure explanation of this breaking change, under the ngOptionsheading.

在ngOptions标题下，请参阅迁移指南，了解这种重大更改的模糊解释。

Due to 7fda214c, when ngOptions renders the option values within the DOM, the resulting HTML code is different. Normally this should not affect your application at all, however, if your code relies on inspecting the value property of elements (that ngOptions generates) then be sure to read the details.

由于7fda214c，当 ngOptions 在 DOM 中呈现选项值时，生成的 HTML 代码是不同的。通常这根本不会影响您的应用程序，但是，如果您的代码依赖于检查元素的 value 属性（由 ngOptions 生成），那么请务必阅读 details。