angularjscheckbox全选单选批量删除

相信许多同学在项目实际开发中都能面对到批量选择&＃xff0c;然后进行批量操作的问题&＃xff0c;我百度过许多angularjs的批量操作的方法&＃xff0c;但是都不够简洁明白&＃xff0c;我个人整合一个比较清晰的思路给大家&＃xff0c;这也是本小白的第一个csdn博客&＃xff0c;希望能对需要的人有所帮助。

先说一下批量操作的思路&＃xff0c;就是把你需要操作的所有信息的所有Id封装成一个json数组传递到后台。

首先先看一下html代码

解释一下html的结构&＃xff0c;第一个全选checkbox绑定一个函数all($event,datas)&＃xff0c;这个函数的作用是点击它将所有的checkbox置为true或false然后将所有的id放进selected[]中。

循环中的checkbox中的函数updateSelection($event,item.id)作用是更新selected[]数组中的id&＃xff0c;你如果选择或取消某条数据的话&＃xff0c;相应的selected[]数组就会取消或者增加.

然后我们来看一下控制器

//checkbox全选单选$scope.selected &＃61; [] ;//定义一个数组 //全选方法&＃xff0c;并将所有的id一并传入selected数组中$scope.all &＃61; function($event,data){var checkbox &＃61; $event.target ; var checked &＃61; checkbox.checked ; if(checked){$scope.x&＃61;true;for(var key in data){if($scope.selected.indexOf(data[key].id)>&＃61;0){//判断数组中是否重复存在continue;}else{$scope.selected.push(data[key].id);}}console.log($scope.selected);}else{$scope.x&＃61;false;$scope.selected&＃61;[];}};$scope.updateSelection &＃61; function($event,id){ //单选更新selectedvar checkbox &＃61; $event.target ; var checked &＃61; checkbox.checked ; if(checked){ $scope.selected.push(id);}else{ var idx &＃61; $scope.selected.indexOf(id) ; $scope.selected.splice(idx,1); } }//批量删除$scope.alldelete &＃61; function(){var url&＃61;&＃39;/jsjxyxt/advice/alldelete.do&＃39;;var datas&＃61;{dataObject:$scope.selected,};$http.post(url,datas).success(function(data){if(data.msg&＃61;&＃61;"0"){toaster.pop(&＃39;error&＃39;, &＃39;系统提示&＃39;, &＃39;删除失败&＃39;);}else{toaster.pop(&＃39;success&＃39;, &＃39;系统提示&＃39;,&＃39;批量删除成功&＃39;);$timeout(function(){$scope.$apply(function(){$scope.datas &＃61; data.result;})})} })}

在一个就是

$scope.selected.indexOf(data[key].id)>&＃61;0

这个方法是判断数组中是否已经存在该id,用来防止重复存放的。

后面的请求后台就不说了吧&＃xff0c;比较容易懂。希望能帮到需要的人。