今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index.

其实对于这个问题来说Angular本身并未提供$index之类的变量供使用。但是也不是说对于这个问题我们就没有解决方案。

把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,使用表达式作为option的label就能解决了。

但是第一印象让我想起的是js数组本来就是一个key/value的对象,只是key为数组下标而已,所以有了如下之设计:

html:

<pre></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将是无序的所以,出现了无序的下标如下:

<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,所以我们可以对数据源对象上加上一个order字段标示下标作为序号。并且你可以在一个2年前的Angular的issue中看到Angular已经fix issue,option会对数组进行按下标顺序生成。

html:

<pre></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是按照有序的生成,最后我们终于能完美解决了,所以本文也将收尾。在最后在附上可运行的demo plnkr ngOptions index;

为Angularjs ngOptions加上index解决方案的更多相关文章

  1. angularjs跨域post解决方案

    转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传 ...

  2. angularjs ng-option ie issue解决方案

    最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源,并且被套在ng-switch(ng-transclude)之类的,当angular上得ng-options数 ...

  3. [转]Ionic + AngularJS angular-translate 国际化本地化解决方案

    本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html 欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术 ...

  4. Ionic + AngularJS angular-translate 国际化本地化解决方案

    欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术分享/ionic-plus-angularjs-angular-translate-国际化本地化解决方案 ...

  5. AngularJS track by $index引起的思考

    今天写了一段程序,只是一个简答的table数据绑定,但是绑定select的数据之后,发现ng-change事件失去了效果,不知道什么原因. 主要用到的代码如下: <div id="ri ...

  6. How to set the initial value of a select element using AngularJS ng-options & track by

    原文: https://www.gurustop.net/blog/2014/01/28/common-problems-and-solutions-when-using-select-element ...

  7. AngularJS 相关小问题解决方案合集

    1  解决 Select选择框遍历时,出现一个空白选项: <select style="width: 20%;margin-left: 5px;height: 31px;" ...

  8. 怎么解决dede首页网址自动加上index.html

    怎样去掉dedecms5.7(织梦)首页url后index.html有三种方法 1.去配置你的空间的默认首页地址.把index.html移到默认文本最前面.(确保你的默认文档里面有index.html ...

  9. 随笔编号-04 AngularJS 相关小问题解决方案合集

    1  解决 Select选择框遍历时,出现一个空白选项: <select style="width: 20%;margin-left: 5px;height: 31px;" ...

随机推荐

  1. pll及其modesim仿真

    100mhz输入时钟,pll层40mhz和200zhm 进入quartus,建立工程,新建图形文件,导入pll模块,设定pll相关参数.   完成pll模块的建立,并生成pll.v文件 建立modes ...

  2. 20145316&20145229实验四:驱动程序设计

    20145316&20145229实验四:驱动程序设计 结对伙伴:20145316 许心远 博客链接:http://www.cnblogs.com/xxy745214935/p/6130871 ...

  3. moss2003 sp3补丁安装

    安装完成以后自己在产品库里增加的存储过程不见了,自我保护?

  4. php mysql支持emoji表情方案

    将emoji转换成utf8 然后存储到数据库,但是 效率低 public function rrr($text) { $text = 'a

  5. 关于maven中央仓库jar包不存在问题

    最近接手一个maven项目,引入依赖的时候报了一个 Missing artifact com.oracle:ojdbc6:jar:12.1.0.1 pom.xml 的错误,网上一查,原来是Oracle ...

  6. MFC修改初始窗口大小和窗口名字禁止窗口最大,最小化

    2,在里面就可以修改初始窗口大小和窗口名字 BOOL CMainFrame::PreCreateWindow(CREATESTRUCT& cs){if( !CFrameWnd::PreCrea ...

  7. hdu 1312(DFS)

    Red and Black Tme Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  8. centos安装lamp环境

    通过yum安装,需要联网且为su账号 yum -y install httpd php mysql mysql-server php-mysql 设置开启启动mysql,httpd     /sbin ...

  9. lvs-keepalived故障记录

    上图中1与2.3不同,可能会导致端口不同,尽量配置1.2.3相同

  10. Java程序,取随机数的两种实现方法

    1.随机数的第一种程序(取0-9的整型随机数) public class random_1 { public static void main(String[] args) { Random r=ne ...