關於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"> </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'">

這樣順序問題就解決了，但讀值就麻煩多了，需經過遍歷取值。