61

假设我select使用以下方法将数组绑定到标签：

<select ng-model="selData" ng-options="$index as d.name for d in data">

在这种情况下，关联的option标签被分配一个索引值序列：(0, 1, 2, ...)。但是，当我从下拉列表中选择某些内容时， 的值selData将绑定到undefined. 绑定真的应该起作用吗？

另一方面，假设我改为执行以下操作：

<select ng-model="selData" ng-options="d as d.name for d in data">

在这里，option标签获得相同的索引，但整个对象绑定在更改上。它是通过设计以这种方式工作的，还是这种行为只是 AngularJS 的一个很好的错误或副作用？

4

5 回答 5

204

由于数组与 JavaScript 中的对象非常相似，因此您可以使用“对象数据源”的语法。诀窍在部分的括号中ng-options：

var choices = [
  'One',
  'Two',
  'Three'
];

在模板中：

<select
  ng-model="model.choice"
  ng-options="idx as choice for (idx, choice) in choices">
</select>

最后，model.choice将有值 0、1 或 2。当它为 0 时，您将看到One; 1 将显示Two等。但在模型中，您只会看到索引值。

我从 PACKT Publishing 的“使用 AngularJS 掌握 Web 应用程序开发”中改编了这些信息，并在Angular 参考文档中验证了 select。

于 2014-02-27T20:55:52.993 回答
45

既然不能用$index，可以试试indexOf。

HTML

<div ng-app ng-controller="MyCtrl">
    <select 
          ng-model="selectedItem"
          ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>

控制器

function MyCtrl($scope) {
    $scope.values = ["Value1","Value2"];
    $scope.selectedItem = 0;
}

演示Fiddle

评论：

Array.prototype.indexOf在 IE7 (8) 中不支持

于 2013-10-09T13:12:05.770 回答
23

$index 是为 ng-repeat 定义的，而不是 select。我认为这解释了undefined. （所以，不，这不应该工作。）

Angular 支持对整个对象进行绑定。该文档的措辞可以更好地表明这一点，但它确实暗示了这一点：“当您希望将选择模型绑定到非字符串值时，应该使用 ngOptions ... 而不是 ngRepeat。”

于 2012-12-17T15:47:17.180 回答
4

您也可以在<option>标签中使用 ng-value='$index'。

<select ng-model="selData">
 <option ng-repeat="d in data track by $index" ng-value="$index">
   {{d.name}}
 </option>
</select>
于 2016-07-19T21:08:20.037 回答
1

不要$index在选择标签内使用。$index如果要将数组索引用作值或选项，请在选项标签内使用。

<option ng-repeat="user in users" value="{{user.username}}">{{$index+1}}</option>

如果您想使用内部值，只需将其作为绑定表达式放入 value 属性中

<option ng-repeat="user in users" value="{{$index+1}}">{{user.username}}</option>

我的控制器代码如下：

var users = ['username':'bairavan', 'username':'testuser'];
于 2018-05-30T06:42:35.813 回答