简单思路:
(1)全选的checkbox的ng-checked设置为函数isAllSelected,即isAllSelected返回true则列表的各项全部选中,否则都不选中;
(2)同时给列表各项的checkbox的ng-checked设置为各数据项的属性isChecked,该属性为前端处理后台数据时主动加上的,用于区分单项是否选中;
(3)再分别给全选及各个列表项的checkbox加上点击事件;
(4)全选的点击事件处理:isAllSelected返回为true,forEach遍历列表项数据的isChecked都设置为false;isAllSelected返回为false,forEach遍历列表项数据的isChecked都设置为true;
(5)各单项的点击事件处理:当前项的isChecked为true,点击之后设置为false;当前项的isChecked为false,点击之后设置为true;直接取反
(6)filter过滤出列表数据中isChecked为true的数据
<table> <thead> <tr> <th><input type="checkbox" ng-checked="isAllSelected()" ng-click="selectAllItems(all)" ></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td><input type="checkbox" ng-checked="all" ng-model="item.isChecked" ng-click="selectItems(item)"></td>
</tr>
</tbody>
</table>
$scope.selectAllItems = selectAllItems; $scope.selectItems = selectItems; $scope.getSelectData= getSelectData;
$scope.isAllSelected = isAllSelected;
function isAllSelected() {
return $scope.list.every(item => item.isChecked)
}
// 全选
function selectAllItems(){
const isAll = isAllSelected();
$scope.list.forEach(item => item.isChecked = !isAll)
}
// 依次选
function selectItems(item) {
item.isChecked = !item.isChecked;
}
// 选中数据
function getSelectData() {
const selectData = $scope.list.filter(item => item.isChecked);
console.log(selectData)
}