ng-option指令使用记录，设置默认值需要注意

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>

View Code