标签：mod 列表 body lse 全选 fun class item func
简单思路：
（1）在全选的checkbox上的ng-model设置一个值all，该值在checkbox未选中时为false，选中时为true；
（2）列表项的checkbox的ng-checked设置为all，即all为true列表的各项全部选中，否则都不选中；
（3）同时给列表各项的checkbox的ng-model设置为各数据项的属性isChecked，该属性为前端处理后台数据时主动加上的，用于区分单项是否选中；
（4）再分别给全选及各个列表项的checkbox加上点击事件；
（5）全选的点击事件处理：all为true，map遍历列表项数据的isChecked都设置为true；all为false，map遍历列表项数据的isChecked都设置为false；
（6）各单项的点击事件处理：当前项的isChecked为true，点击之后设置为false；当前项的isChecked为false，点击之后设置为true；
（7）filter过滤出列表数据中isChecked为true的数据
<table> <thead> <tr> <th><input type="checkbox" ng-model="all" ng-click="selectAllItems(all)" ></th> </tr> </thead> <tbody> <tr ng-repeat="item in list"> <td><input type="checkbox" ng-checked="all" ng-modle="item.isChecked" ng-click="selectItems(item)"></td> </tr> </tbody> </table>
$scope.selectAllItems = selectAllItems; $scope.selectItems = selectItems; $scope.getSelectData= getSelectData; // 全选 function selectAllItems(all,e){ all ? $scope.list.map(item => item.isChecked = true) : $scope.list.map(item => item.isChecked = false) } // 依次选 function selectItems(item,e) { if(item.isChecked){ item.isChecked = false; } else { item.isChecked = true; } } // 选中数据 function getSelectData() { const selectData = $scope.list.filter(item => item.isChecked); console.log(selectData) }
angularjs实现checkbox的点击-全选功能-选中数据
标签：mod 列表 body lse 全选 fun class item func
原文地址：https://www.cnblogs.com/haimengqingyuan/p/11523635.html
