文档章节

为Angularjs ngOptions加上index解决方案

liuyuantao
 liuyuantao
发布于 2016/04/09 09:53
字数 494
阅读 6
收藏 0

如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$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-&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>{{ 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;

本文转载自:http://blog.csdn.net/u013510614/article/details/50703763

liuyuantao
粉丝 5
博文 134
码字总数 27666
作品 0
武汉
高级程序员
私信 提问
AngularJS 1.3.14/1.4.0 Beta5 发布

AngularJS 今天发布两个更新版本,分别是 1.3.14 和 1.4 Beta5 。 其中 1.3.14 更新内容如下: 新特性 CommonJS: - angular modules are now packaged for npm with helpful exports Bug 修复......

oschina
2015/02/26
2.1K
2
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
159
0
怎么解决Bower下载的依赖包不同机器不同版本

前端我用Bower去管理依赖项。 在执行bower install时我下载的依赖包的结构都比较规范。 注:bower.json是一样的 例如 我的目录结构 bower_components/angular/angular.js 其他机器bower ins...

刘成万
2015/11/12
360
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部