关于ngOptions的键值对

原创
2015/04/08 14:02
阅读数 3.2K

在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'">

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

展开阅读全文
打赏
1
1 收藏
分享
加载中
都不知道你说啥
2015/11/09 11:13
回复
举报
更多评论
打赏
1 评论
1 收藏
1
分享
返回顶部
顶部