angularJS中select元素的应用浅析
select array 数据:
select ng-model 用法:
1.可以是一个对象形式,ng-model="test" $scope.test = {name: "admin1", id: 1, data: [12], type: "open"};
2.可以是一个string或者number,ng-model="test.id" $scope.test = {name: "admin1", id: 1, data: [12], type: "open"};
select ng-change 用法:
ng-change="getDateTest(test)"
$scope.getDateTest = function (item) {
console.log(item);
};
本来是想把item直接当作参数传给getDateTest,但是试过之后发现不行,拿到的是undefined,不能像ng-repeat循环出来的那样做。
select ng-options 用法:
1.item.name for item in array
基本用法,array是一个数组列表,item是数组中的一项,json形式,name是json中的一项。
可以看到循环出来的label就是item.name,但是value值应该是随机搞出来的,这里没指定的情况下,我也不太清楚value是按照啥来的-_-
2.item.id as item.name for item in array
item.id 会和 test.id 进行对比,如果一样,会默认选到这一项option;当选择某一项option时会把当前的id赋值给test.id。
这种情况下,label是item.name,value就是item.id。
3.item.name for item in array track by item.id
这种情况是在基本配置下多了一个track by,是用来指定索引项,在这里value就是item.id。
选择某一项option时,test会被赋值为当前的option,也就是当前的一项item,所以这时候就可以在ng-change时把test传回去,解决了上面无法传入item的问题。
4.item.name group by item.type for item in array
这种用法可以分组,依据item.type分成了两组数据。
5.对象的用法:
1).key for (key, value) in object
需要注意的是这里的test会被赋值成value的值。
2).key as key for (key, value) in object
这种情况和上面唯一的区别是test会被赋值成key的值。
3).key group by value for (key, value) in object
这种情况下会按照value分组。
select 小结:
在使用angular过程中,会经常与列表的循环打交道,用的比较多的是ng-repeat,那个很好用。但是最近用到了select,就了解了一下,发现ng-options也是很有趣,也蛮多用法的,就简单总结了一下,希望以后再用到什么新功能再来补充吧-_-
最新文章
- webstorm 更改默认服务器端口
- redis的安装及使用
- GIT学习
- [Linux] mail 命令,进入邮箱及删除邮件
- less2
- POJ 1182 食物链(种类并查集)
- Css_2跟3
- Python之路-(三级菜单)
- Android开发——实现固定在ScrollView顶部的View,类似于新浪微博的评论列表的顶部
- 最严格的身份证校验(JavaScript版)
- Delphi default属性
- CodeForces 598E Chocolate Bar
- springmvc流程图
- vue文件上传控件
- Python 中文数字转阿拉伯数字
- JavaScript的内置对象(Math对象)
- IDEA如何把写好的java文件/项目打包成一个jar的文件
- padding-top和margin-top的区别
- 使用Markdown语法画流程图
- 解决Tomcat出现内存溢出的问题