angularJs select用法详解
来源:互联网 发布:java中 voliate原理 编辑:程序博客网 时间:2024/04/28 14:08
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
<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
<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
<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
<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
的值
参考
- http://docs.angularjs.org/api/ng.directive:select
- http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx
0 0
- angularJs select用法详解
- AngularJS select中ngOptions用法详解
- AngularJS select详细用法
- Angularjs中ng-select和ng-options的用法详解
- angularJs select框用法总结
- select用法详解
- select用法详解
- select用法详解
- GO select用法详解
- AngularJS的Filter用法详解
- AngularJS的Filter用法详解
- AngularJS的Filter用法详解
- angularjs select
- angularjs select
- AngularJS select
- angularJS select
- AngularJS select
- linux---select函数用法详解
- 威利方舟 TCI-Ⅲ-B 支持的靶控药物以及药代动力学模型
- 26种提高ASP.NET网站访问性能的优化方法
- BZOJ3709 [PA2014]Bohater
- 【Codeforces 444A DZY Loves Physics】
- jdbc连接
- angularJs select用法详解
- 第5天
- 【GIT】 git rebase 使用
- JDBC 链接
- 什么才是真正的中国筷子!
- 厦门海实_Day004
- 今天在群里看到有人分享了一段搞笑的注释代码,觉得挺好玩的,
- 勾股定理一日一证连载144
- android 代码设置无actionbar和全屏