angular和bootstrap實現checkbox的點選全選事件
阿新 • • 發佈:2019-01-31
1、angular檔案
app.controller('繫結控制器名稱',['$scope', function($scope){ $scope.checked = []; $scope.toggleCheck = function(id,$index,event) { if(event.target.nodeName != 'INPUT' && event.target.nodeName != 'SPAN') return; //判斷是否已經選中 var isset = $scope.checked.indexOf(id); //返回首次出現的位置 if(isset === -1) { $scope.checked.push(id); //沒有選中,則把當前的id放到checked變數裡面 } else{ $scope.checked.splice(isset,1); //選中,則刪除checked中的id $scope.selectAll = false; //置空全選狀態 } //選中的長度是否等於全部資料的長度 if($scope.checked.length == $scope.datas.length) { $scope.selectAll = true; } else { $scope.selectAll = false; } } //全選按鈕事件 $scope.checkAll = function(event) { event.stopPropagation();//阻止當前事件在DOM樹上冒泡 if(event.target.nodeName != 'INPUT' && event.target.nodeName != 'TD' && event.target.nodeName != 'SPAN' && even.target.nodeName != 'STRONG') return; //清空所有 $scope.checked = []; $scope.selectAll = !$scope.selectAll; if($scope.selectAll) //不選中的狀態時,遍歷追加到到checked陣列中 { angular.forEach($scope.datas,function(item,i) { $scope.checked.push(item.id); } } }; ]);
2、html檔案
<table> <tr style="font-weight: bold" ng-click="checkAll($event)" class="tr-a"> <td> <label class="checkbox-inline i-checks"> <input type="checkbox" ng-checked="selectAll"/> <i></i> <b>全選</b> </label> </td> </tr> <tr> <td ng-click="toggleCheck({{id}},$index,$event)"> <label class="checkbox-inline i-checks"> <input type="checkbox" ng-checked="checked.indexOf(data.id) > -1 "><i></i> </label> </td> </tr> </table>