angularjs实现checkbox的点击-全选功能-选中数据

简单思路:

(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)
}

 

原文地址:https://www.cnblogs.com/haimengqingyuan/p/11523635.html