AngularJs實現checkbox的全選、全取消
阿新 • • 發佈:2019-02-15
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 } };