ng-options一般有以下用法：
數組作為數據源：
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
對象作為數據源：
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object
使用事例如下：select element
<select ng-model="myColor1" ng-options="color.name as color.name for color in colors"></select>
這是ng-options表達式的基本形式，形如"<標簽>" for <項目> in <數組or對象>這樣的形式，angularjs會為數組中的每一個對象生成一個option元素，並且將其值設置到標簽中去。
選擇一個列表時ng-model的值會指向select元素的當前選中項的value值.
對於這個select元素會生成如下的HTML：
<select ng-model="myColor1" ng-options="color.name as color.name for color in colors" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="0" label="black">black</option>
<option value="1" label="white">white</option>
<option value="2" label="red">red</option>
<option value="3" label="blue">blue</option>
<option value="4" selected="selected" label="yellow">yellow</option>
</select>
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="myCtrl"> Color :<select ng-model="myColor1" ng-options="color.name as color.name for color in colors"></select><br> Color :<select ng-model="myColor2" ng-options="color.name for color in colors"></select><br/> Color grouped by shade: <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"> <option value="">-- choose color --</option> </select><br/> </body> <script src="angular.js"></script> <script> angular.module("myApp",[]) .controller("myCtrl",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.myColor1 = "yellow"; // 此種方式設置默認值時需要修改ng-options color.name as color.name $scope.myColor2 = $scope.colors[2]; // 設置默認值 }) </script> </html>
有時不想總是使用整個源對象來設置ng-model的值，就可以使用 xxx.name as xxx.id
ng-options="color.name as color.id for color in colors"
對於數組的使用：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="myCtrl"> <select ng-model="val" ng-options="item[0] for item in arr"></select> </body> <script src="angular.js"></script> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ $scope.arr=[ [11,12,13,14], [21,22,23,24], [31,32,33,34], [41,42,43,44] ]; $scope.val = $scope.arr[0];//設置默認值 }) </script> </html>
orderBy,track by
track by提高ng-repeat的渲染性能，ng-option同樣也支持track by。
對下拉框進行排序可以使用orderBy過濾器;
測試code如下：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <style> select{width: 80px;} </style> </head> <body ng-controller="myCtrl"> <select ng-model="val" ng-options="item.label for item in arr | orderBy:'id' track by item.id"></select> </body> <script src="angular.js"></script> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ $scope.arr=[ {id:4,label:31}, {id:3,label:22}, {id:1,label:11}, {id:5,label:41}, {id:2,label:21} ]; $scope.val = $scope.arr[0];//設置默認值 }) </script> </html>
總結
接觸一個指令學習一個指令，如何設置默認值需要注意，順手總結在這里，也是一種學習。