ng-select ng-options ng-repeat的用法与区别

 

ng-options ng-repeat的用法

工作中总会遇到关于下拉选项的一些操作，但是经常会遇到一些问题，基本上都是以下问题：

- 下拉框使用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">