html5option的js代码,ng-option(示例代码)

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

大意是，select中的ngOption可以采用和ngRepeat指令类似的循环结构，其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。但是官网的例子实在是太少了。

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

先上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

-- 请选择 --

效果:

说明

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

usage中的 label 也就是 ng-options 中的m.productName， 其实就是一个 AngularJS Expression

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

usage: label for value in array

-- 请选择 --

效果

说明

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

实例三： 让选项分组

usage: label group by group for value in array

-- 请选择 --

效果

说明

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

实例四：自定义ngModel的值

usage: select as label for value in array

-- 请选择 --

效果

说明

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

参考

http://docs.angularjs.org/api/ng.directive:select

http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx