angularJs select用法详解
2016-10-28 08:30
429 查看
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: '黃' }]; }
[/code]
实例一:基本下拉效果
usage: label for value in array<select ng-model="selected" ng-options="m.productName for m in model"> <option value="">-- 请选择 --</option> </select>
[/code]
效果:
说明
usage中的 value 也就是 ng-options 中的 m,而 m 是数组model的一个元素,它是一个变量
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>
[/code]
效果
说明
可以看到,usage 中的 label 可以根据需求拼接出不同的字符串
实例三: 让选项分组
usage: label group by group 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>
[/code]
效果
说明
这里使用了
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>
[/code]
效果
说明
这种用法也是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
相关文章推荐
- Angularjs中ng-select和ng-options的用法详解
- AngularJS select中ngOptions用法详解
- AngularJS select中ngOptions用法详解
- AngularJS的Filter用法详解
- java爬取网页内容 简单例子(2)——附jsoup的select用法详解
- 数据库SQL语句 SELECT LIKE like用法详解
- select用法详解
- SQL语句 SELECT LIKE like用法详解
- AngularJS中$interval的用法详解
- select 模糊匹配 like用法详解
- SQL语句 SELECT LIKE 用法详解
- select用法详解
- SQL语句 SELECT LIKE like用法详解
- 详解AngularJS中的filter过滤器用法
- jsoup中select用法详解
- select用法详解 http://blog.chinaunix.net/uid-23373524-id-2426940.html
- SQL语句 SELECT LIKE like用法详解
- SQL语句 SELECT LIKE 用法详解
- Xml中SelectSingleNode用法详解
- select语句详解(包括JOIN的用法等)