为Angularjs ngOptions加上index解决方案-JavaScript_网络编程-脚本宝典
今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index.
其实对于这个问题来说Angular本身并未提供$index之类的变量供使用。但是也不是说对于这个问题我们就没有解决方案。
把这个问题换成角度来看,我们所需要的就是js数组的下标，所以我们如果我们能够在对象上加入下标，使用表达式作为option的label就能解决了。
但是第一印象让我想起的是js数组本来就是一个key/value的对象，只是key为数组下标而已，所以有了如下之设计：
&pre&&/pre&
& &select &ng-model=&a& ng-options=&value.field as getDesc1(key,value) for (key,value) in t&&&/select&
$scope.getDesc1 = function(key, value) {
& & return (parseInt(key, 10) + 1) + &-&& + value.
可是不幸的是如果对于Script你若将他作为key/value对象那么key将是无序的所以，出现了无序的下标如下：
&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&
所以这样是无法解决的。还好博主还有一招，ngOptions支持Angularjs的filter，所以我们可以对数据源对象上加上一个order字段标示下标作为序号。并且你可以在一个2年前的Angular的issue中看到Angular已经fix issue，option会对数组进行按下标顺序生成。
&pre&&/pre&
&select &ng-model=&b& ng-options=&l.field as getDesc(l) for l in t | index &&&/select&
&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.
& & }).filter(&index&, [
& & & function() {
& & & & return function(array) {
& & & & & return (array || []).map(function(item, index) {
& & & & & & item.order = index + 1;
& & & & & &
& & & & & });
& & & & };
这下option是按照有序的生成，最后我们终于能完美解决了,所以本文也将收尾。在最后在附上可运行的demo plnkr ngO
分享给好友：Posts - 270,
Articles - 0,
Comments - 2019
22:33 by 破狼, ... 阅读,
今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index.
其实对于这个问题来说Angular本身并未提供$index之类的变量供使用。但是也不是说对于这个问题我们就没有解决方案。
把这个问题换成角度来看,我们所需要的就是js数组的下标，所以我们如果我们能够在对象上加入下标，使用表达式作为option的label就能解决了。
但是第一印象让我想起的是js数组本来就是一个key/value的对象，只是key为数组下标而已，所以有了如下之设计：
&pre&&/pre&
ng-model="a" ng-options="value.field as getDesc1(key,value) for (key,value) in t"&&/select&
$scope.getDesc1 = function(key, value) {
return (parseInt(key, 10) + 1) + "-&" + value.
可是不幸的是如果对于JavaScript你若将他作为key/value对象那么key将是无序的所以，出现了无序的下标如下：
&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&
所以这样是无法解决的。还好博主还有一招，ngOptions支持Angularjs的filter，所以我们可以对数据源对象上加上一个order字段标示下标作为序号。并且你可以在一个2年前的Angular的issue中看到Angular已经fix issue，option会对数组进行按下标顺序生成。
&pre&&/pre&
ng-model="b" ng-options="l.field as getDesc(l) for l in t | index "&&/select&
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.
}).filter("index", [
function() {
return function(array) {
return (array || []).map(function(item, index) {
item.order = index + 1;
这下option是按照有序的生成，最后我们终于能完美解决了,所以本文也将收尾。在最后在附上可运行的demo&;web前端（16）
Angular中的 select的ngOptions如何像ngRepeat一样加上一个索引$index,如何实现？
我们所需要的就是js数组的下标，所以我们如果我们能够在对象上加入下标，使用表达式作为option的label就能解决了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：31279次
积分：1430
积分：1430
排名：千里之外
原创：92篇
转载：13篇
译文：20篇
(1)(5)(7)(34)(17)(10)(3)(1)(1)(5)(1)(4)(1)(1)(13)(1)(3)(1)(1)(1)(3)(9)(2)(3)}