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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
深入了解JavaScript词法作用域
Jul 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
js实现轮播图特效
2020/05/28 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Sanic框架路由用法实例分析
2018/07/16 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python实现自动打卡的示例代码
2020/10/10 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
安全标准化实施方案
2014/02/20 职场文书
质检员岗位职责
2015/02/03 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL