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>

有时不想总是使用整个源对象来设置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>

总结

接触一个指令学习一个指令，如何设置默认值需要注意，顺手总结在这里，也是一种学习。