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

       

    }
);

 

　　以上基本實現全選，反選，多選操作