工作中总会遇到关于下拉选项的一些操作，但是经常会遇到一些问题，基本上都是以下问题：
- 下拉框使用ng-options和ng-repeat的区别
- 下拉框的默认选项的问题
- 下拉框的model值如何绑定
- 下拉框的禁用选项问题
- 下拉框的分组和排序的问题
ng-repeat和ng-options的用法
ng-repeat是通过数组来循环HTML代码来创建下拉列表，ng-repeat绑定到ngModel的值只能是字符串。
ng-options的列表项可以是对象和数组循环输出，很多时候使用ng-options更方便。
(1)看一个数据的列表项是数组的例子：
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script>
a. 使用ng-options循环数据:
<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> </div>
注意，这里的ng-init可以直接将下拉列表的第一个值设置为默认值。
b. 使用ng-repeat循环数据：
<div ng-app="myApp" ng-controller="myCtrl"> <select> <option ng-repeat="x in names">{{x}}</option> </select> </div>
(2)数据的列表项是对象
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
$scope.selectedSite=$scope.sites[0]; //这一句直接将下拉列表的第一个值作为默认值a. 使用ng-repeat就会有局限性，选择的值只能是一个字符串:
<select ng-model="selectedSite"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option> </select> <h1>你选择的是: {{selectedSite}}</h1>
b. 使用ng-options选择的值就是一个对象:
<select ng-model="selectedSite" ng-options="x.site for x in sites"> </select> <h1>你选择的是: {{selectedSite.site}}</h1> <p>网址为: {{selectedSite.url}}</p>
从上面两个例子，可以看出ng-options和ng-repeat的区别有以下几个方面：
1. ng-options一定要和ng-model搭配，这里的ng-model获取的就是列表的一个对象。
ng-repeat的value值类型是string。
2. 设置首选项有两个方法，ng-init和直接js赋值，也可以添加一个未选中的选项：
<select ng-model="selectedSite" ng-options="x.site for x in sites"> <option value="">-- 选择一个地址 --</option> </select>
关于ng-repeat的其他用法
在实际的应用场景中，我们需要一个表格来管理信息，这时候使用ng-repeat的$index可以知道是哪一行被操作了。具体看一个例子：
<table> <tr ng-repeat="x in list"> <td>{{x.name}}</td> <td><input type="button" value="我是第{{$index}}行的按钮" ng-click="onClick($index)"></td> </tr> </table>
$scope.onClick = function (index) { alert("点击了第"+index+"行的按钮"); };
要注意的是，$index是从0开始计算的。
ng-options的分组和排序的功能
(1) ng-options支持group by语法进行分组。
$scope.colors = [ {name: '黑色', color: 'black', type: "暗色"}, {name: '白色', color: 'white', type: "亮色"}, {name: '红色', color: 'red', type: "暗色"}, {name: '蓝色', color: 'blue', type: "暗色"}, {name: '黄色', color: 'yellow', type: "亮色"} ];
<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors">
结果会根据“暗色”和“亮色”分组。
(2)ng-options支持orderBy过滤器对结果排序
<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors | orderBy:'name' "> </select>
结果会根据“暗色”和“亮色”分组，在分组里根据字符顺序排序。
ng-options禁用某些选项
$scope.colors = [ {name: '黑色', color: 'black', type: "暗色"}, {name: '白色', color: 'white', type: "亮色", disabled: false}, {name: '红色', color: 'red', type: "暗色", disabled: true}, {name: '蓝色', color: 'blue', type: "暗色", disabled: false}, {name: '黄色', color: 'yellow', type: "亮色", disabled: true} ];
<select ng-model="colorChosen" ng-options="color.name group by color.type disable when color.disabled for color in colors">
