关于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

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

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

你可能感兴趣的:(AngularJS,ngOptions)