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

一尘不染

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

angularjs

运行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中的错误，还是现在需要以不同的方式处理这些情况？

阅读 272

2020-07-04

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

2020-07-04