angular的ng-options

原文地址：

http://my.oschina.net/gejiawen0913/blog/188539#OSC_h2_1

select

是
AngularJS 预设的一组directive。下面是其官网api doc给出的用法：AngularJS:select
大意是，

select

中的

ngOption

可以采用和

ngRepeat

指令类似的循环结构，其data
source可以是array或者是object。针对两种data source又有衍生的好几种用法。但是官网的例子实在是太少了。
下面是针对几个不太容易理解的用法的例子。
先上controller

[code]<!-- lang: js -->
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

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

效果:



说明usage中的 value 也就是 ng-options 中的 m，而 m 是数组model的一个元素，它是一个变量
usage中的 label 也就是 ng-options 中的

m.productName

，
其实就是一个 AngularJS Expression

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

usage: label for value in array

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

效果



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

实例三： 让选项分组

usage: label group by group for value in array

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

效果



说明这里使用了

group
 by

，通过

$scope.model

中的

mainCategory

字段进行分组

实例四：自定义

ngModel

的值

usage: select as label for value in array

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

效果



说明这种用法也是select指令最复杂的一种。从效果中可以看出，usage中select的作用就是重新定义

ng-model

的值。在这里，ng-model等于m.id，当

ng-model

发生改变的时候，得到的是

m.id

的值

select

是
AngularJS 预设的一组directive。下面是其官网api doc给出的用法：AngularJS:select大意是，

select

中的

ngOption

可以采用和

ngRepeat

指令类似的循环结构，其data
source可以是array或者是object。针对两种data source又有衍生的好几种用法。但是官网的例子实在是太少了。下面是针对几个不太容易理解的用法的例子。先上controller

[code]<!-- lang: js -->
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

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

效果:说明usage中的 value 也就是 ng-options 中的 m，而 m 是数组model的一个元素，它是一个变量
usage中的 label 也就是 ng-options 中的

m.productName

，
其实就是一个 AngularJS Expression

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

usage: label for value in array

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

效果说明可以看到，usage 中的 label 可以根据需求拼接出不同的字符串

实例三： 让选项分组

usage: label group by group for value in array

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

效果说明这里使用了

group
 by

，通过

$scope.model

中的

mainCategory

字段进行分组

实例四：自定义

ngModel

的值

usage: select as label for value in array

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

效果说明这种用法也是select指令最复杂的一种。从效果中可以看出，usage中select的作用就是重新定义

ng-model

的值。在这里，ng-model等于m.id，当

ng-model

发生改变的时候，得到的是

m.id

的值