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

Posted haimengqingyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs实现checkbox的点击-全选功能-选中数据相关的知识,希望对你有一定的参考价值。

简单思路:
(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的点击-全选功能-选中数据的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS--购物车全选/取消全选功能实现

如何用jQuery实现checkbox全选

Easyui的tree设置了checkbox,怎么样可以实现点击按钮全选checkbox和取消全选checkbox?

AngularJs复选框全选

使用el-checkbox实现全选,点击失效没有反应

js实现checkbox全选功能