带有 track by 的 Angular ng-options 创建未知选项元素答案

【问题标题】：Angular ng-options with track by creates unknown option element带有 track by 的 Angular ng-options 创建未知选项元素
【发布时间】：2016-02-07 22:58:32
【问题描述】：

我的目标是生成一个选择列表，其中的选项值设置为我的对象属性之一。将 track by binding 选项添加到 ng-options 指令时，会创建一个未知的选项元素，并且它是唯一显示被选中的选项。这种行为在 angular v1.3 中（这是我正在使用的版本）。在 v1.4 中，它仍然会创建未知项目，但会更改显示以显示不同的选定项目。在这两种情况下，它都不会将下拉菜单的初始状态设置为与模型值相对应。

ng-options Track By example v1.3

  <body>
    <script>
    angular.module('plunker', [])
    .controller("MyCntrl",   function($scope) {
        $scope.myColor = "rd"; // red
        $scope.colors = [
          {name:'black', code:'bk'},
          {name:'white',  code:'wh'},
          {name:'red', code:'rd'},
          {name:'blue', code:'bl'},
          {name:'yellow', code:'yl'}
        ];
    });
  </script>
    <div ng-controller="MyCntrl">
      <select ng-model="myColor" ng-options="color.code as color.name for     color in colors track by color.code"></select><br>
      <hr/>
      <span>Currently selected: {{myColor}}</span>
   </div>
</body>

在 v1.4 中，它仍然不设置初始状态，但在选择一个新值时它会改变显示。我觉得奇怪的是这不起作用而且这不是问题。

Angular v1.4 Plnkr

如果您想知道，我们需要这样，以便选项值是我们的测试自动化可以键入的已知代码，而我们唯一希望模型值是代码。似乎是一件相当标准的事情。

【问题讨论】：

标签： angularjs ng-options angularjs-track-by

【解决方案1】：

您需要将值设置为控制器中的整个对象。

   $scope.myColor ={name:'red', code:'rd'};

然后它会正确选择。

【讨论】：

问题是我的模型（来自数据库）只有代码。标签来自本地化的内容管理系统。因此，我在模型中设置和检索所选值所需的只是代码。
我不知道为什么这是个问题。如果您的代码看起来像上面给出的示例，那么无论您是否只有或需要代码，这都是解决方案。如果您的模型包含具有名称和代码的对象，并且最初您拥有所有代码，只需在列表中找到具有该代码的对象并将其设置为当前值。当您将数据发送回您的应用程序时，只需提取所选项目的代码并发送即可。
是的，这是可行的，但需要更多不需要的编码。当您将 track by 添加到绑定语句时，没有理由认为列表不应仅绑定到代码。