文档章节

关于ngOptions的键值对

一点灵犀
 一点灵犀
发布于 2015/04/08 14:02
字数 310
阅读 1492
收藏 1
点赞 1
评论 1

在Angularjs中,ng-options的参数可以由数组、Object等组成,最终编译成:

<option value="value">label</option>

其中value是值,label是显示的内容。比如,对于这样一个Object:

m = { text: '文字' picture: '图片' gif: 'GIF' video: '视频' }

如果这样使用:

<select name="type" ng-model="anyname" ng-options="k as v for (k, v) in m"> </select>

则:

value = k = text|picture|gif|video label = v = 文字|图片|GIF|视频 type = k : v (比较的是引用) anyname = value

valueas v的k,页面上显示的内容是for(k,v)中的v。这样,显示和取值两不误。Stackoverflow 上的解说印证了上面的结果。

注意:如果写成ng-options="v as v for (k, v) in m",则value和label均不变,但实际读到的值anyname=v。

使用object很方便,但有个问题,下拉列表的显示顺序是字典顺序,而不是我们的书写顺序。为了保证顺序的一致性,必须使用数组:

m = [ { v: 'text', t: '文字' }, { v: 'image', t: '图片' }, { v: 'video', t: '视频' } ]

用法如下:

<select name="type" ng-model="anyname" ng-options="atype.v as atype.t for atype in m" ng-init="type='text'">

这样顺序问题就解决了,但读值就麻烦多了,需通过遍历取值。

© 著作权归作者所有

共有 人打赏支持
一点灵犀

一点灵犀

粉丝 10
博文 51
码字总数 15202
作品 1
深圳
程序员
加载中

评论(1)

陈文亮
陈文亮
都不知道你说啥
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

Angular.js 1.6.5 发布,Web 前端框架

Web 前端框架 Angular.js 1.6.5 发布了,更新内容如下: 新功能 select: 公开控制器中的选择状态信息 $animate: 添加对 的支持 $compile: 重载 .component()以接受组件的对象映射 $log: 记...

王练 ⋅ 2017/07/04 ⋅ 35

AngularJS 使用ngOption实现下拉列表

下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值; 另一个是ng-options用于确定下拉列表的元素数组。 <select ng-model="engineer.curre...

孟飞阳 ⋅ 2016/12/11 ⋅ 0

Angular.js 1.4.7/1.5.0-beta.1/v1.3.20/v1.2.29 发布

Angular.js 1.4.7/1.5.0-beta.1/v1.3.20/v1.2.29 发布,更内容如下: 1.5.0-beta.1 dense-dispersion (2015-09-29) Bug 修复 $compile: use createMap() for $$observe listeners when initi......

oschina ⋅ 2015/09/30 ⋅ 13

AngularJS 1.4.0.rc2 发布

AngularJS 1.4.0.rc2 发布,此版本代号为:rocket-zambonimation,更新内容如下: 重大改进 ngAnimate $animateCss: due to d5683d21,The $animateCss service will now always return anob......

oschina ⋅ 2015/05/13 ⋅ 8

AngularJS 1.3.9/1.4.0 Beta0 发布

AngularJS 今天 ”又“ 发布了两个新版本(咦,我为什么要说 ”又“ 呢?) 其中 1.3.9 是个小改版本,不过有性能提升哦: Bug Fixes $parse: allow use of locals in assignments(86900814)...

oschina ⋅ 2015/01/15 ⋅ 16

Angular.js v1.5.10 发布,Web 前端框架

Angular.js v1.5.10 发布了。 更新内容: Bug 修复 $compile: don't throw tplrt error when there is whitespace around a top-level comment (12752f #15108) clean up -binding observer......

达尔文 ⋅ 2016/12/17 ⋅ 8

PhalGo-介绍 PhalGo-介绍

angularjs: Hacking with Angular: 玩转ngOptions指令 PhalGo-介绍 PhalGo-介绍 Python 开发者在迁移到 Go(lang) 时需要知道哪些事? Go vs Erlang - 转 Go vs Erlang 并发 抢占式调度 垃圾回...

d_watson ⋅ 2016/05/25 ⋅ 0

Angular.js v1.6.1 发布,Web 前端框架

Web 前端框架 Angular.js v1.6.1 发布了,代号 promise-rectification。更新如下: $q: 将回溯添加到未处理的 promise rejections (174cb4 #14631) $$cookieReader: 正确处理禁止访问 (33f76...

局长 ⋅ 2016/12/24 ⋅ 3

ES6Map和Set结构学习笔记

关于Set ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 构造函数 Set 本身是一个构造函数,用来生成 Set 数据结构。 Set 函数可以接受一个数组(或者具...

tiancai啊呆 ⋅ 05/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java集合类总结笔记

一、集合类的层次关系 主要容器集合类的特点: ArrayList 一种可以动态增长和缩减的索引序列 LinkedList 一种可以在任何位置进行高效地插入和删除的有序序列 ArrayDeque 一种用循环数组实现的...

edwardGe ⋅ 8分钟前 ⋅ 0

spring RMI远程调用

RMI https://www.cnblogs.com/wdh1995/p/6792407.html

BobwithB ⋅ 13分钟前 ⋅ 0

Jenkins实践2 之基本配置

1 插件管理 系统管理->插件管理 在可选插件中可以自主安装插件 2 管理用户 系统管理->管理用户->新建用户 3 安全配置 系统管理->全局安全配置 授权策略 选择安全矩阵 然后添加现有的用户,赋...

晨猫 ⋅ 13分钟前 ⋅ 0

c++智能指针

1、是一种泛型类,针对指针类型的泛型类,会保存指针 2、重载了符号 *和-> 对智能指针使用这两个符号,相当于对保存的泛型使用这两个符号 3、当智能指针引用计数为0时,会去释放指针指向的资...

国仔饼 ⋅ 14分钟前 ⋅ 0

Spring Boot错误处理机制

1)、SpringBoot默认的错误处理机制 默认效果: 1)、浏览器,返回一个默认的错误页面 浏览器发送请求的请求头: 2)、如果是其他客户端,默认响应一个json数据 原理: 可以参照ErrorMvcAut...

小致dad ⋅ 16分钟前 ⋅ 0

ftp连接不上的终极办法 SFTP

假如FTP由于各种原因就是连不上,那么用SFTP协议吧,使用登录服务器的账号密码。

sskill ⋅ 20分钟前 ⋅ 0

Unity 围绕旋转角度限制(Transform.RotateAround)

在 Unity 中可以利用 Transform.RotateAround 围绕指定物体进行旋转,但某些情况下可能需要对旋转角度进行控制。我是先计算出预设角度大小,然后判断是否在限定角度范围内是则进行旋转。 相关...

大轩 ⋅ 21分钟前 ⋅ 0

阿里沙箱环境支付宝测试demo

阿里支付宝支付和微信支付,包括:阿里沙箱环境支付宝测试demo,支付宝支付整合到spring+springmvc+mybatis环境和微信整合到如上环境,功能非常齐全,只需要修改对应的配置文件即可,帮助文档...

码代码的小司机 ⋅ 24分钟前 ⋅ 0

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 41分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 45分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部