AngularJS 实现全选框全选思路介绍_angularjs 复选框全选-CSDN博客

本文链接：https://blog.csdn.net/weixin_43464964/article/details/87271330

本文详细介绍如何在AngularJS中实现全选功能，包括展示全选、真实全选及操作数据后的初始化。涵盖ng-model、ng-checked、ng-change等指令应用，及selectAll和updateSelection方法编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 实现点击全选框时其他框的选中状态保持一致:

利用 AngularJS 的 ng-model 指令给全选框绑定一个变量如 checked, 这时全选框的值会推送给 checked, 即选中状态时 checked 的值为 true, 否则为 false :
示例:

	<!-- 全选框 -->
<input id="selall" type="checkbox" ng-model="checked"  class="icheckbox_square-blue">

使用 AngularJS 的 ng-checked 指令给子选择框绑定 checked 变量,由于AngularJS 的机制是当变量发生改变时会自动推送, 所以子选择框的选中状态会随着全选框的选中状态而改变:

<!-- 子选择框(这里只使用代码片段做示例) -->
<input type="checkbox" ng-checked="checked" >

2. 实现真实全选(实际后台可操作)

第一步完成后我们实现了展示时的全选, 但我们并不能实际操作选中的数据, 因为我们操作数据时往往需要传递要操作数据的 id 或其他信息来操作数据, 因此我们需要使用 ng-change 指令来给全选框绑定事件, 当全选框内容发生改变时执行一个 AngularJS 方法, 来传递数据:

<!-- 全选框 -->
<input id="selall" type="checkbox" ng-model="checked" ng-change="selectAll()"  class="icheckbox_square-blue">

注意: 在全选框中这样写的话不能使用 ng-click 指令,因为点击指令会优先于 ng-model 指令执行, 传递的 checked 会是点击之前的值, 这并不符合我们的需求。
在 AngularJS 的 Controller 中编写 selectAll() 方法:

    // 全选方法
    $scope.selectAll = function () {
        
        if ($scope.checked) {
            // 如果是选中状态,则将所有id加入进来
            for (var i = 0; i < $scope.list.length; i++) {
                $scope.selectIds.push($scope.list[i].id);
            }
        } else {
            // 如果全选框为未选中,则初始化selectIds
            $scope.selectIds = [];
        }
        
    }

单选的操作我们也可以在这里进行, 当点击子选择框时执行方法操作选中集合 selectIds ：

<!-- 子选择框 -->
<td><input type="checkbox" ng-checked="checked" ng-click="updateSelection($event,entity.id)"></td>

同样，我们在 AngularJS 的 Controller 中添加方法：

    //更新复选
    $scope.updateSelection = function ($event, id) {
        if ($event.target.checked) {//如果是被选中,则增加到数组
            $scope.selectIds.push(id);
        } else {
            var idx = $scope.selectIds.indexOf(id);
            $scope.selectIds.splice(idx, 1);//删除 
        }
    }

这样，在我们选中选择框后，就可以通过传递 selectIds 来真实的操作数据了！

3. 在操作完数据后和页面数据集合重新加载时初始化

为了提高用户体验，我们在操作完数据或页面数据重新加载后要初始化selectIds 和 checked 的值 , 这里在 AngluarJS 的 Controller 中定义了重新加载页面数据的方法reloadList():

    //重新加载列表 数据
    $scope.reloadList = function () {
        // 初始化选择框
        $scope.checked = false;
        $scope.selectIds=[];
         //切换页码
        $scope.search($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
    }

我们只需要在执行方法后调用此方法即可
如批量删除操作:

<button type="button" class="btn btn-default" ng-click="dele()" title="删除"><i class="fa fa-trash-o"></i> 删除</button>

controller 中的方法:

    //批量删除
    $scope.dele = function () {
        // 判断selectIds 是否为空
        if ($scope.selectIds.length > 0) {
            //获取选中的复选框
            if (confirm("确认删除所选内容吗 ?")) {
                goodsService.dele($scope.selectIds).success(
                    function (response) {
                        if (response.success) {
                            $scope.reloadList();//刷新列表
                            $scope.selectIds = [];
                        }
                    }
                );
            }
        } else {
            alert("请先选择要删除的内容");
        }
    }