AngularJS select详细用法
2016-01-27 14:19
721 查看
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转换响应内容
- AngularJS转换请求内容
- AngularJS中转换响应内容
- 使用AngularJS创建应用的5个框架
- 会jQuery,该如何用AngularJS编程思想?
- Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(一)环境搭建
- AngularJS中介者模式实例
- AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
- AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
- AngularJS转换响应内容
- AngularJS动态绑定ng-options的ng-model
- angularjs 合并单元格
- AngularJS系列:6、指令
- AngularJS中使用Karma单元测试初体验
- Angularjs directive
- 过滤器
- 作用域
- Angularjs 初始化未加载完毕闪烁问题解决 ng-cloak
- AngularJS系列:5、核心概览
- angular点击一个元素添加类,其他同辈元素删除类