AngularJS实现在ng-Options加上index的解决方法


Posted in Javascript onNovember 03, 2016

本文实例讲述了AngularJS实现在ng-Options加上index的解决方法。分享给大家供大家参考,具体如下:

Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index.

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

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

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

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

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

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程序设计有所帮助。

Javascript 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
浅谈jquery事件处理
Apr 24 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue文件树组件使用详解
Mar 29 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 #Javascript
基于vuejs+webpack的日期选择插件
May 21 #Javascript
Vue.js创建Calendar日历效果
Nov 03 #Javascript
AngularJS中transclude用法详解
Nov 03 #Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 #Javascript
AngularJS控制器之间的通信方式详解
Nov 03 #Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
You might like
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
修改发贴的编辑功能
2007/03/07 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python3字符串学习教程
2015/08/20 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
django中模板的html自动转意方法
2018/05/27 Python
jupyter 导入csv文件方式
2020/04/21 Python
python中pivot()函数基础知识点
2021/01/03 Python
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
优秀教师先进事迹
2014/01/22 职场文书
新年晚会主持词
2014/03/24 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2014年平安夜寄语
2014/12/08 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
建党伟业电影观后感
2015/06/01 职场文书
亲戚关系证明
2015/06/24 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python