1. 程式人生 > >AngularJs實現checkbox的全選、全取消

AngularJs實現checkbox的全選、全取消

HTML端的關鍵程式碼

<thead>
                    <tr>
                        <th style="width:100px;">
                            <label class="i-checks m-b-none">
                                <input type="checkbox" ng-model="master" ng-click="all(master,dataList1)"><i></i>
                            </label>
                                                                                         全選
                        </th>
                        
                    </tr>
                </thead>
<tr ng-repeat="d in dataList1 track by $index" >
                        <td>
                            <label class="i-checks m-b-none">
                                <input  type="checkbox" name="selected" ng-model="x" ng-checked="master" ng-click="chk(d.id,x)"><i></i>
                            </label>
                        </td>
                        <td ng-bind="d.id"></td>
                        <td ng-bind="d.name"></td>
                    </tr>


JS 端關鍵程式碼

    $scope.choseArr=[];//定義陣列用於存放前端顯示
    var str="";//
    var flag='';//是否點選了全選,是為a
    $scope.x=false;//預設未選中
     
    $scope.all= function (c,v) {//全選
        if(c==true){
            $scope.x=true;
            $scope.choseArr=[""];
        }else{
            $scope.x=false;
            for(var i=0;i<v.length;i++){
            	$scope.choseArr[i]=''+v[i].id+'';
            }
        }
     
        flag='a';
     console.log($scope.choseArr);
    };
    $scope.chk= function (z,x) {//單選或者多選
        if(flag=='a') {//在全選的基礎上操作
            str = $scope.choseArr.join(',') + ',';
        }
        if (x == true) {//選中
            str = str + z + ',';
        } else {
            str = str.replace(z + ',', '');//取消選中
        }
     
        $scope.choseArr=(str.substr(0,str.length-1)).split(',');
     console.log($scope.choseArr);
    };
    $scope.deletes= 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
        }
    };