AngularJS:select指令用法详解

select指令是 AngularJS 预设的一组directive。这里是AngularJS官网给出的用法： AngularJS:select

大概的意思是，select中的ngOption可以采用和ngRepeat指令类似的循环结构，其数据源可以是Array或者是Object。针对两种数据源又可以衍生出好几种用法。

但是官网给出的例子太少了。

下面是针对几个不太容易理解的用法示例。

先上Controller

function selectCtrl($scope) {
    $scope.selected = '';
    $scope.model = [{
        id: 10001,
        mainCategory: '男',
        productName: '水洗T恤',
        productColor: '白'
    }, {
        id: 10002,
        mainCategory: '女',
        productName: '圆领短袖',
        productColor: '黑'
    }, {
        id: 10003,
        mainCategory: '女',
        productName: '短袖短袖',
        productColor: '黄'
    }];
}

示例

示例一：基本下拉效果

usage:
label for value in array

<select ng-model="selected" ng-options="m.productName for m in model">
    <option value="">-- 请选择 --</option>
</select>

效果

说明

1. usage 中的value也就是ng-options中的m，而m是数组model的一个元素，它是一个变量
2. usage 中的label也就是ng-options中的m.productName，其实就是一个AngularJS Expression

示例二：自定义下拉显示名称

usage
label for value in array

<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
    <option value="">-- 请选择 --</option>
</select>

效果

说明

1. 可以看到，usage 中的label可以根据需求拼接出不同的字符串

示例三：让选项分组

usage
label group by groupName for value in array

<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
    <option value="">-- 请选择 --</option>
</select>

效果

说明

1. 这里使用了group by，通过$scope.model中的mainCategory字段进行分组

示例四：自定义ngModel的绑定

usage
select as label for value in array

<select ng-model="selected" ng-options="m.id as m.productName for m in model">
    <option value="">-- 请选择 --</option>
</select>

效果

说明

1. 这种用法也是select指令中较为复杂的一种。从效果中可以看出，usage 中select的作用就是重新绑定ng-model的值。在这里，ng-model等于m.id，当ng-model发生改变的时候，得到的实际值是m.id的值。