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

     

  • 相关阅读:
    作业三:代码规范、代码复审、PSP
    第二周学习进度表
    作业二:Github注册过程
    作业二:源程序版本管理软件和项目管理软件的优缺点
    作业二:四则运算
    408笔记--操作系统
    408笔记--计算机网络
    408笔记--计算机组成原理
    408笔记--数据结构
    2020 PAT秋季甲级考试(91分)-记
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/11523635.html
Copyright © 2020-2023  润新知