AngularJS實現(xiàn)在ng-Options加上index的解決方法

更新時間：2016年11月03日 11:48:59 作者：破狼

這篇文章主要介紹了AngularJS實現(xiàn)在ng-Options加上index的解決方法,結(jié)合實例形式分析了AngularJS在ngOptions添加索引的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了AngularJS實現(xiàn)在ng-Options加上index的解決方法。分享給大家供大家參考，具體如下：

Angularjs交流群中有位童學(xué)問道如何為Angular select的ng-Options像Angularjs的ng-Repeat一樣加上一個索引$index.

其實對于這個問題來說Angular本身并未提供$index之類的變量供使用。但是也不是說對于這個問題我們就沒有解決方案。

把這個問題換成角度來看,我們所需要的就是js數(shù)組的下標(biāo)，所以我們?nèi)绻覀兡軌蛟趯ο笊霞尤胂聵?biāo)，使用表達式作為option的label就能解決了。

但是第一印象讓我想起的是js數(shù)組本來就是一個key/value的對象，只是key為數(shù)組下標(biāo)而已，所以有了如下之設(shè)計：

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-&gt;jw_companyTalent</option>
 <option value="1" >2-&gt;jw_reportgroup</option>
 <option value="10" >11-&gt;jw_ads</option>
 <option value="11" >12-&gt;jw_jobcomment</option>
 <option value="12" >13-&gt;jw_companyInfo</option>
 ....
</select>

所以這樣是無法解決的。還好博主還有一招，ngOptions支持Angularjs的filter，所以我們可以對數(shù)據(jù)源對象上加上一個order字段標(biāo)示下標(biāo)作為序號。并且你可以在一個2年前的Angular的issue中看到Angular已經(jīng)fix issue，option會對數(shù)組進行按下標(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是按照有序的生成，最后我們終于能完美解決了,所以本文也將收尾。在最后在附上可運行的demoplnkr ngOptions index;

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: