关于ngOptions的键值对

标签：

在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"> <br /></select>

则：

value = k = text|picture|gif|video

label = v = 文字|图片|GIF|视频
type = k : v （比较的是引用）
anyname = value

即value是as 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‘">

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

关于ngOptions的键值对

标签：

原文地址：http://my.oschina.net/u/2324376/blog/397317