AngularJs 简单实现全选,多选操作
2015-07-06 13:56
543 查看
很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作。
Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)
demo 演示地址:http://runjs.cn/detail/kq9wj56o
代码如下:
HTML:
页面效果如下:(CSS采用bootstrap)
![](http://images0.cnblogs.com/blog2015/702677/201507/061354412687313.png)
JS代码:
以上基本实现全选,反选,多选操作
Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)
demo 演示地址:http://runjs.cn/detail/kq9wj56o
代码如下:
HTML:
<section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)"> <div ng-repeat="z in tesarry"> <input id={{z}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}} </div> <a href="#" class="btn btn-danger" ng-click="delete()" > 删除</a> </section>
页面效果如下:(CSS采用bootstrap)
![](http://images0.cnblogs.com/blog2015/702677/201507/061354412687313.png)
JS代码:
$scope.tesarry=['1','2','3','4','5'];//初始化数据 $scope.choseArr=[];//定义数组用于存放前端显示 var str="";// var flag='';//是否点击了全选,是为a $scope.x=false;//默认未选中 $scope.all= function (c,v) {//全选 if(c==true){ $scope.x=true; $scope.choseArr=v; }else{ $scope.x=false; $scope.choseArr=[""]; } flag='a'; }; $scope.chk= function (z,x) {//单选或者多选 if(flag=='a') {//在全选的基础上操作 str = $scope.choseArr.join(',') + ','; } if (x == true) {//选中 str = str + z + ','; } else { str = str.replace(z + ',', '');//取消选中 } $scope.choseArr=(str.substr(0,str.length-1)).split(','); }; $scope.delete= function () {// 操作CURD if($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示 alert("请至少选中一条数据在操作!") return; }; for(var i=0;i<$scope.choseArr.length;i++){ //alert($scope.choseArr[i]); console.log($scope.choseArr[i]);//遍历选中的id } };
以上基本实现全选,反选,多选操作
相关文章推荐
- AngularJS-入门篇
- AngularJS简介-起步阶段
- AngularJS的启动过程分析
- angularjs客户端实现压缩图片文件并上传实例
- Angular Module声明和获取重载
- angularjs客户端实现压缩图片文件并上传实例
- AngularJS自定义表单控件
- AngularJS自定义表单验证器
- 使用AngularJs需要注意的事项
- AngularJS自定义表单验证
- AngularJS学习笔记1
- angularjs应用骨架
- AngularJs自定义指令详解(9) - terminal
- AngularJs自定义指令详解(8) - priority
- AngularJs自定义指令详解(7) - multiElement
- [Angularjs]视图和路由(一)
- 浅谈angularJS 作用域
- AngularJs自定义指令详解(6) - controller、require
- AngularJS表单验证操作例子分享
- 浅谈angularJS 作用域