angularjs实现checkbox的点击-全选功能-选中数据
发布时间:2020-12-17 07:06:29 所属栏目:安全 来源:网络整理
导读:简单思路: (1)在全选的checkbox上的ng-model设置一个值all,该值在checkbox未选中时为false,选中时为true; (2)列表项的checkbox的ng-checked设置为all,即all为true列表的各项全部选中,否则都不选中; (3)同时给列表各项的checkbox的ng-model设置
简单思路: <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) } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |