如何使用 ng-options 抑制 value 属性中的变量类型? [英] How to suppress variable type within value attribute using ng-options?
问题描述
运行 AngularJS 1.4.0-rc.1，ng-options 循环中的值包含变量的类型.
查看以下代码:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js"><脚本>angular.module("selectOptionsTest", []).控制器(SelectOptionsController"，[$scope"，函数($scope){$scope.options = [{id: 1, 标签: "Item 1"},{id: 2, 标签: "Item 2"},{id: 3, 标签: "Item 3"}];}]);<div ng-app="selectOptionsTest" ng-controller="SelectOptionsController"><select ng-model="opt" ng-options="option.id as option.label for option in options"></选择>这将生成如下所示的 HTML 代码:
为什么该值以变量的类型为前缀，即number:?在以前的 AngularJS 版本(例如当前稳定的 1.3.15)中，value 属性填充了 1、2 和 2 的预期值代码>3.
那么这是 1.4.0-rc.1 中的错误还是现在需要以不同方式处理这些情况?
很明显，ngOptions 指令的处理方式发生了变化.此更改在 AngularJS 1.4 的迁移说明 中进行了简要说明.可以在提交消息中找到更详细的更改说明:
当使用 ngOptions 时:指令应用代理键作为 元素的值.此提交更改实际字符串用作代理键.我们现在存储一个字符串，它是由对选项集合中的项目调用 hashKey；以前它是集合中项目的索引或键.
(这与未知选项值的方式一致在 select 指令中表示.)
在您可能已经看到之前:
现在将是这样的:
如果您的应用程序代码依赖于这个值，它不应该，那么您将需要修改您的应用程序以适应这一点.你可能会发现你可以使用 ngOptions 的 track by feure 作为这个提供指定存储的密钥的能力.
这意味着您现在需要使用 track by 来获得与以前相同的结果.要修复问题中的示例，它需要如下所示:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js"><脚本>angular.module("selectOptionsTest", []).控制器(SelectOptionsController"，[$scope"，函数($scope){$scope.options = [{id: 1, 标签: "Item 1"},{id: 2, 标签: "Item 2"},{id: 3, 标签: "Item 3"}];}]);<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"></选择>Running AngularJS 1.4.0-rc.1 the value within a ng-options loop contains the type of the variable.
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:
<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 value attributes are filled with the expected values of 1, 2 and 3.
So is this a bug in 1.4.0-rc.1 or do those cases need to be handled differently now?
Obviously there was a change in how the ngOptions directive 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:
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 callinghashKeyon 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 ofngOptionsas this provides the ability to specify the key that is stored.
This means that you now need to use track by to get the same result as before. To fix the example in the question it needs to look like this 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 as option.label for option in options track by option.id">
</select>
</div>
这篇关于如何使用 ng-options 抑制 value 属性中的变量类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
