AngularJS:select指令用法详解

Category:
发表:
大纲
  1. 1. 先上Controller
  2. 2. 示例
    1. 2.1. 示例一:基本下拉效果
    2. 2.2. 示例二:自定义下拉显示名称
    3. 2.3. 示例三:让选项分组
    4. 2.4. 示例四:自定义ngModel的绑定

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指令中较为复杂的一种。从效果中可以看出,usageselect的作用就是重新绑定ng-model的值。在这里,ng-model等于m.id,当ng-model发生改变的时候,得到的实际值是m.id的值。