ngOption針對不一樣類型的數據源有不一樣的用法,主要體如今數組和對象上。html
數組:數組
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
對象:spa
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
說明:code
通用的js代碼:htm
<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>
html:對象
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
效果:blog
html:ip
<select ng-model="myColor" ng-options="color.shade as color.name for color in colors"></select>
效果:it
label group by group for value in arrayio
html:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>
html:
<select ng-model="myColor" ng-options="color.name as color.name group by color.shade for color in colors">
效果:
html:
<select ng-model="myColor" ng-options="color.name for color in colors track by color.name">
效果:
html:
<select ng-model="obj" ng-options="key for (key, value) in object"></select>
效果:
html:
<select ng-model="obj" ng-options="key as key for (key, value) in object"></select>
效果:
html:
<select ng-model="obj" ng-options="key group by value for (key, value) in object"></select>
效果:
html:
<select ng-model="obj" ng-options="key as key group by value for (key, value) in object"></select>
效果: