一、用法

ngOption針對(duì)不同類(lèi)型的數(shù)據(jù)源有不同的用法，主要體現(xiàn)在數(shù)組和對(duì)象上。

數(shù)組：

label for value in array? select as label for value in array label group by group for value in array select as label group by group for value in array select?as?label?group?by?group?for?value?in?array?track?by trackexpr

對(duì)象：

label for ( key , value ) in object select as label for ( key , value ) in object label group by group for ( key , value ) in object select as label group by group for ( key , value ) in object

說(shuō)明：

array / object： 數(shù)據(jù)源的類(lèi)型，有數(shù)組和對(duì)象兩種 value：迭代過(guò)程中，引用數(shù)組的項(xiàng)或者對(duì)象的屬性值 key：迭代過(guò)程中，引用對(duì)象的屬性名 label：選項(xiàng)顯示的標(biāo)簽，用戶可看到的 select：結(jié)果綁定到ngModel中，如果沒(méi)有指定，則默認(rèn)綁定value group：group by的條件，表示按某條件進(jìn)行分組 trackexpr：用于唯一確定數(shù)組中的迭代項(xiàng)的表達(dá)式

二、實(shí)例

通用的js代碼：

<script>var MyModule = angular.module("MyModule",[]);MyModule.controller("Ctrl",["$scope", function($scope){$scope.colors = [{name:'black', shade:'dark'},{name:'white', shade:'light'},{name:'red', shade:'dark'},{name:'blue', shade:'dark'},{name:'yellow', shade:'light'}];$scope.object = {dark: "black",light: "red",lai: "red"};}]); </script>

label for value in array

html:

<select ng-model="myColor" ng-options="color.name for color in colors"></select>

效果：

---

select as label for value in array

html：

<select ng-model="myColor" ng-options="color.shade as color.name for color in colors"></select>

效果：

?

?

---

?label group by group for value in array

html：

<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select> 效果：

---

?select as label group by group for value in array

html：

<select ng-model="myColor" ng-options="color.name as color.name group by color.shade for color in colors">

效果：

---

?select?as?label?group?by?group?for?value?in?array?track?by trackexpr

html：

<select ng-model="myColor" ng-options="color.name for color in colors track by color.name">

效果：

---

?label for ( key , value ) in object

html：

<select ng-model="obj" ng-options="key for (key, value) in object"></select>

效果：

---

?select as label for ( key , value ) in object

html：

<select ng-model="obj" ng-options="key as key for (key, value) in object"></select>

效果：

?

---

?label group by group for ( key , value ) in object

html：

<select ng-model="obj" ng-options="key group by value for (key, value) in object"></select>

效果：

---

?select as label group by group for ( key , value ) in object

html：

<select ng-model="obj" ng-options="key as key group by value for (key, value) in object"></select>

效果：

轉(zhuǎn)載于:https://www.cnblogs.com/laixiangran/p/4956751.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS select中ngOptions用法详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。