AngularJS – 在ng-options中使用$ index
如果我使用以下方法将数组绑定到SELECT标签:
<select ng-model="selData" ng-options="$index as d.name for d in data">
OPTION标签获得期望的递增索引值(0,1,2,…)。 但是,当我从下拉列表中select一些东西时, selData
的值selData
被绑定到undefined
。 绑定实际上是否工作?
另一方面,如果我这样做:
<select ng-model="selData" ng-options="d as d.name for d in data">
OPTION标签获得相同的索引,但整个对象绑定在变化上。 我不知道Angular是否意味着支持这个,或者它只是一个很好的bug /副作用。
$ index是为ng-repeat定义的,而不是select。 我认为这解释了undefined
。 (所以,不,这不应该。)
Angular支持绑定整个对象。 文档可以更好地表明这一点,但它提示:“ngOptions …应该用来代替ngRepeat,当你希望select模型绑定到一个非string值。
由于数组与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将显示“两个”等,但在模型中,您只会看到索引值。
我使用了PACKT Publishing的“掌握AngularJS开发Web应用程序开发”中的信息,并在Angular参考文档中进行了validation。
既然你不能使用$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; }
演示小提琴
评论:
Array.prototype.indexOf
在IE7(8)中不受支持
你也可以在<option>
标签中使用ng-value ='$ index'。
<select ng-model="selData"> <option ng-repeat="d in data track by $index" ng-value="$index"> {{d.name}} </option> </select>