文档章节

关于ngOptions的键值对

一点灵犀
 一点灵犀
发布于 2015/04/08 14:02
字数 310
阅读 1502
收藏 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'">

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

© 著作权归作者所有

共有 人打赏支持
一点灵犀

一点灵犀

粉丝 11
博文 53
码字总数 15777
作品 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.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
2.1K
13
Angular.js 1.6.5 发布,Web 前端框架

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

王练
2017/07/04
3.8K
35
AngularJS 1.4.0.rc2 发布

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

oschina
2015/05/13
2.2K
8
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
1K
8

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
39
4
Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
12
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
19
0

中国龙-扬科
昨天
4
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部