一、用法

ngOption針對不同類型的數據源有不同的用法，主要體現在數組和對象上。

數組：

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

對象：

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

說明：

array / object： 數據源的類型，有數組和對象兩種 value：迭代過程中，引用數組的項或者對象的屬性值 key：迭代過程中，引用對象的屬性名 label：選項顯示的標簽，用戶可看到的 select：結果綁定到ngModel中，如果沒有指定，則默認綁定value group：group by的條件，表示按某條件進行分組 trackexpr：用于唯一確定數組中的迭代項的表達式

二、實例

通用的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>

效果：

轉載于:https://www.cnblogs.com/laixiangran/p/4956751.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。