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）　

　

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

     }
 );

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