最近一段時(shí)間的項(xiàng)目中遇到了很多的關(guān)于下拉框的場(chǎng)景，當(dāng)時(shí)只是模仿原有的項(xiàng)目代碼，并沒有深入的理解，為此寫此博客將該問題深入進(jìn)行理解。

主要是對(duì)ng-options的學(xué)習(xí)

下面現(xiàn)將ng-options的幾個(gè)典型的用法列出來
在<select>指令中ng-model 與 ng-options 配合使用

ngOption針對(duì)不同類型的數(shù)據(jù)源有不同的用法，主要體現(xiàn)在數(shù)組和對(duì)象上，因?yàn)槲覀冎饕褂脭?shù)組，所以下面主要講數(shù)組。

label for value in array
這是最簡(jiǎn)單的一個(gè)只是簡(jiǎn)單的將數(shù)組中對(duì)象的lable屬性顯示出來，ng-model的值還是value。

select as label for value in array
這種寫法中涉及到as的使用，當(dāng)前的顯示還依然是lable的值，但是ng-model的值已經(jīng)發(fā)生了改變，成為了select中的值

label group by group for value in array
這種寫法涉及到group for的使用當(dāng)前的顯示還是lable,但回按照group分組，ng-model的值為value

label for value in array track by trackexpr
這條指令涉及到track by 的使用用于唯一確定數(shù)組中的迭代項(xiàng)的表達(dá)式,當(dāng)lable相同時(shí)，指定唯一的value值與ng-model綁定

當(dāng)數(shù)據(jù)源為對(duì)象時(shí)
label for ( key , value ) in object
為大概使用模式，就是將value改為 ( key , value )如下形式，ng-model默認(rèn)綁定model

在學(xué)習(xí)上面幾種寫法時(shí)，發(fā)現(xiàn)track by 的使用不太好理解,用官網(wǎng)上的例子說明一下。
This will work:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];

but this will not work:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;

第一個(gè)你可以通過ng-model來唯一確定數(shù)組中的迭代項(xiàng)，items[0]里面包含item.id
第二個(gè)你會(huì)發(fā)現(xiàn)items[0].subItem不能確定item.id