如何使用共进晚餐NG-期权价值属性中preSS变量类型？ [英] How to suppress variable type within value attribute using ng-options?

问题描述

运行AngularJS 1.4.0-RC.1一个中的值NG选项循环包含变量的类型。

请参阅以下code：

\r

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.4.0-rc.1/angular.js\">\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本＆GT;\r
  angular.module（selectOptionsTest，[]）。\r
    控制器（SelectOptionsController，[$范围功能（$范围）{\r
      $ scope.options = [\r
        {ID：1，标签：项目1}，\r
        {ID：2，标签：项目2}，\r
        {ID：3，标签：项目3}\r
      ];\r
    }]）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV NG-应用=selectOptionsTestNG控制器=SelectOptionsController＆GT;\r
  ＆LT;选择NG模型=选择NG选项=option.id作为option.label在选项选项＆GT;\r
  ＆LT; /选择＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

这生成HTML code看起来像这样：

 ＆LT;选择NG选项=option.id作为option.label在选项选项NG模型=选项级=NG-原始NG-有效NG-感动＆GT;
  ＆LT;？期权价值=选择=选择＆GT;＆LT; /选项＆GT;
  ＆LT;期权价值=号：1标签=项目1＆GT;项目1 LT; /选项＆GT;
  ＆LT;期权价值=号：2的标签=项目2＆GT;项目2'; /选项＆GT;
  ＆LT;期权价值=号：3的标签=3项＆GT;项目3'; /选项＆GT;
＆LT; /选择＆GT;
 

为什么价值$ P $的变量的类型pfixed，即号：？在AngularJS的previous版本（如当前稳定1.3.15）的值属性都充满了预期值 1 ， 2 和 3 。

因此​​，这是在1.4.0-RC.1一个bug或做这些案件现在需要进行不同的处理？

解决方案

显然，有一个在 ngOptions 指令是如何处理的变化。这种变化是简单地在迁移笔记AngularJS 1.4 解释。变化的更详细说明可以在提交信息：

  

在使用 ngOptions ：指令应用于代理键作为
  价值＆LT;选项＆GT; 元素。此提交更改的实际字符串
  作为代理键。我们现在存储由计算的字符串
  调用 hashKey 按选项收集的项目; previously它
  是集合中的索引或项目的键

  
  

（这是与未知的期权价值的方式是保持
  再在选择指令psented $ P $）。

  
  

在你可能已经看到：

  
  

＆LT;选择NG模型=XNG选项=我的物品＆GT;
   ＆LT;期权价值=1＆gt;将＆LT; /选项＆GT;
   ＆LT;期权价值=2＆GT; B＆LT; /选项＆GT;
   ＆LT;期权价值=3＆GT; C＆LT; /选项＆GT;
   ＆LT;期权价值=4＆GT; D＆LT; /选项＆GT;
  ＆LT; /选择＆GT;

  
  

现在它会是这样的：

  
  

＆LT;选择NG模型=XNG选项=我的物品＆GT;
   ＆LT;期权价值=字符串：一个＆gt;将＆LT; /选项＆GT;
   ＆LT;期权价值=字符串：B＆GT; B＆LT; /选项＆GT;
   ＆LT;期权价值=字符串：C＆GT; C＆LT; /选项＆GT;
   ＆LT;期权价值=字符串：D＆GT; D＆LT; /选项＆GT;
  ＆LT; /选择＆GT;

  
  

如果您的应用程序code这个值，依靠它不应该，
  那么您将需要修改应用程序，以适应这一点。您
  可能会发现，您可以通过 ngOptions 的feaure因为这使用轨道
  提供了指定存储密钥的能力。

这意味着你需要使用按轨道像以前一样得到同样的结果。要解决的问题，它需要像这样再例如：

\r

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.4.0-rc.2/angular.js\">\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本＆GT;\r
  angular.module（selectOptionsTest，[]）。\r
    控制器（SelectOptionsController，[$范围功能（$范围）{\r
      $ scope.options = [\r
        {ID：1，标签：项目1}，\r
        {ID：2，标签：项目2}，\r
        {ID：3，标签：项目3}\r
      ];\r
    }]）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV NG-应用=selectOptionsTestNG控制器=SelectOptionsController＆GT;\r
  ＆LT;选择NG模型=选择NG选项=option.id作为option.label在选项选项跟踪由option.id＆GT;\r
  ＆LT; /选择＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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 calling hashKey on 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 by feaure of ngOptions as 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-期权价值属性中preSS变量类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！