本文實(shí)例講述了AngularJS實(shí)現(xiàn)在ng-Options加上index的解決方法。分享給大家供大家參考，具體如下：
Angularjs交流群中有位童學(xué)問道如何為Angular select的ng-Options像Angularjs的ng-Repeat一樣加上一個(gè)索引$index.
其實(shí)對于這個(gè)問題來說Angular本身并未提供$index之類的變量供使用。但是也不是說對于這個(gè)問題我們就沒有解決方案。
把這個(gè)問題換成角度來看,我們所需要的就是js數(shù)組的下標(biāo)，所以我們?nèi)绻覀兡軌蛟趯ο笊霞尤胂聵?biāo)，使用表達(dá)式作為option的label就能解決了。
但是第一印象讓我想起的是js數(shù)組本來就是一個(gè)key/value的對象，只是key為數(shù)組下標(biāo)而已，所以有了如下之設(shè)計(jì)：
html:
<pre>{{ a | json }}</pre><select ng-model="a" ng-options="value.field as getDesc1(key,value) for (key,value) in t"></select>js:
$scope.getDesc1 = function(key, value) { return (parseInt(key, 10) + 1) + "->" + value.field;};可是不幸的是如果對于JavaScript你若將他作為key/value對象那么key將是無序的所以，出現(xiàn)了無序的下標(biāo)如下：
<select ng-model="a" ng-options="l.field as getDesc1(key,value) for (key,value) in t " class="ng-valid ng-dirty"> <option value="0" >1->jw_companyTalent</option> <option value="1" >2->jw_reportgroup</option> <option value="10" >11->jw_ads</option> <option value="11" >12->jw_jobcomment</option> <option value="12" >13->jw_companyInfo</option> ....</select>
所以這樣是無法解決的。還好博主還有一招，ngOptions支持Angularjs的filter，所以我們可以對數(shù)據(jù)源對象上加上一個(gè)order字段標(biāo)示下標(biāo)作為序號。并且你可以在一個(gè)2年前的Angular的issue中看到Angular已經(jīng)fix issue，option會(huì)對數(shù)組進(jìn)行按下標(biāo)順序生成。
html:
<pre>{{ b | json }}</pre><select ng-model="b" ng-options="l.field as getDesc(l) for l in t | index "></select>js:
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) { $scope.t = [{ "field": "jw_companyTalent" }, { "field": "jw_reportgroup" }]; $scope.getDesc = function(l) { return l.order + "->" + l.field; };}).filter("index", [ function() { return function(array) { return (array || []).map(function(item, index) { item.order = index + 1; return item; }); }; }]);這下option是按照有序的生成，最后我們終于能完美解決了,所以本文也將收尾。在最后在附上可運(yùn)行的demoplnkr ngOptions index;
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
