angular js实现多选 全选

前端代码

 1    <ul class="list checkstyle">
 2             <li class="item item-checkbox">
 3                 <label class="checkbox checkbox-balanced">
 4                     <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)">
 5                 </label>
 6                 全选
 7             </li>
 8             <li class="item item-checkbox" ng-repeat="z in tesarry">
 9                 <label class="checkbox checkbox-balanced">
10                     <input  id={{z.UserId}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)">
11                 </label>
12                 <img src="#" />
13                 <h2>{{z.Name}}</h2>
14             </li>
15             </ul>

后端代码

 

    $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.UserId + ',';
        } else {
            str = str.replace(z.UserId + ',', '');//取消选中
        }
        $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
        }



    };

 

转载于:https://www.cnblogs.com/huanxu/p/4940331.html