文档章节

关于ngOptions的键值对

一点灵犀
 一点灵犀
发布于 2015/04/08 14:02
字数 310
阅读 1499
收藏 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
博文 52
码字总数 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.1K
2
Angular.js 1.6.5 发布,Web 前端框架

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

王练
2017/07/04
3.6K
35
AngularJS 使用ngOption实现下拉列表

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

孟飞阳
2016/12/11
10
0
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
3.4K
16
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
2K
13

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
59分钟前
1
0
AVA中CAS-ABA的问题解决方案AtomicStampedReference

了解CAS(Compare-And-Swap) CAS即对比交换,它在保证数据原子性的前提下尽可能的减少了锁的使用,很多编程语言或者系统实现上都大量的使用了CAS。 JAVA中CAS的实现 JAVA中的cas主要使用的是...

码代码的小司机
今天
2
0
Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
今天
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
今天
3
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部