AngularJs 简单实现全选,多选操作

时间:2023-03-09 01:46:53
AngularJs 简单实现全选,多选操作

很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作。

Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)

demo 演示地址:http://runjs.cn/detail/2p9bnznk

代码如下:

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) 

 AngularJs 简单实现全选,多选操作

JS代码:

 var app = angular.module('app', []);
app.controller('MainCtrl',function($scope,$http,$timeout) {
$scope.tesarry=[1,2,3,4,5];//初始化数据
$scope.choseArr=[];//定义数组用于存放前端显示
var str="";//
var len= $scope.tesarry.length;//初始化数据長度
var flag='';//是否点击了全选,是为a
$scope.x=false;//默认未选中 $scope.all= function (c,v) {//全选
if(c==true){
$scope.x=true;
$scope.choseArr = angular.copy(v);
flag='a';
}else{
$scope.x=false;
$scope.choseArr=[];
flag='b';
} };
$scope.chk= function (z,x) {//单选或者多选 if (x == true) {//选中
$scope.choseArr.push(z)
flag='c'
if($scope.choseArr.length==len){
$scope.master=true
}
} else { $scope.choseArr.splice($scope.choseArr.indexOf(z),1);//取消选中
} if($scope.choseArr.length==0){
$scope.master=false
}; };
$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
} };//delete end }
);

  以上基本实现全选,反选,多选操作