文档章节

关于ngOptions的键值对

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部