AngularJS select详细用法

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

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

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

先上controller

<!-- 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

<!-- lang: html --> <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

<!-- lang: html --> <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 group for value in array

<!-- lang: html --> <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

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

效果