Angular ng-options 按问题跟踪答案

【问题标题】：Angular ng-options track by issueAngular ng-options 按问题跟踪
【发布时间】：2015-07-01 13:43:15
【问题描述】：

我有一个使用 ng-options 显示的对象数据集。我将对象 ID 值绑定到使用 track by 的值

目前，数据值已包含在内，但它们以逗号显示。比如……

$scope.items = [
   {ID: '2012', Title: 'Chicago'},
   {ID: '2013', Title: 'New York'},
   {ID: '2014', Title: 'Washington'},
];

<select ng-options="item.Title for item in items track by item.ID">
</select>

但这会渲染...

<option value="2,0,1,2" label="Chicago">Chicago</option>
<option value="2,0,1,3" label="New York">New York</option>

为什么要添加这些逗号，如何删除它们？

【问题讨论】：

标签： angularjs

【解决方案1】：

您不需要跟踪：

<select ng-options="i.ID as i.Title for i in items" ng-model="someModel"></select>

渲染后你将拥有：

<option value="2012">Chicago</option>
<option value="2013">New York</option>

【讨论】：

我注意到，如果 trak by 跟踪对象，'select as' 和 'track by' 确实有效，而如果我们跟踪属性（即 'track by obj.value' ）则不起作用/跨度>

【解决方案2】：

你的方式

<select ng-options="item.ID as item.Title for item in items" ng-model="someModel"></select>

Fiddle

替代方式

<select ng-model="selectedItem">
        <option ng-repeat="item in items" value="{{item.ID}}">{{item.Title}}</option>
</select>

Fiddle2

【讨论】：

【解决方案3】：

你想要：

<select ng-options="obj.ID as obj.title for obj in items"></select>

Track by 仅有助于在内部进行数组排序。见：stack overflow answer

【讨论】：

【解决方案4】：

试试这个：

<select ng-model="selectedItemID" ng-options="item.ID as item.Title for item in items">
</select>

Selected ID: {{selectedItemID}}

【讨论】：

这不会添加 ID，它只是索引选项值（例如 1、2、3）
它在 value= 部分添加 ID，不带逗号。发布了几个相同的答案。您可以在 JQueryKing 的回答中尝试与 plunkr 相同的方法。

【解决方案5】：

function MyController($scope){
  $scope.items = [
		                {ID: '2012', Title: 'Chicago'},
		                {ID: '2013', Title: 'New York'},
		                {ID: '2014', Title: 'Washington'},
		             ];
  };

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MyController">		
		<select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items track by item.ID"></select>
		<br/>{{selectedItem}}
  </body>
  </html>

以下应该可以工作：--

  <select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items track by item.ID"></select>

  {{selectedItem}}

【讨论】：

选择框即使值改变也不会改变，这是一个Angular问题

【解决方案6】：

如果你希望它是 id 那么你应该使用

item.id 作为项目中项目的 item.name

【讨论】：