AngularJS 实现全选框全选思路介绍

系统管理员 2021-03-12 14:37 618阅读 0赞

##### 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);
        }

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

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("请先选择要删除的内容");
            }
        }

##### 4. AngularJS的指令 #####

（1）ng-app ：指定当前的模块名称

（2）ng-controller :指定控制器

（3）ng-init ：初始化调用方法

（4）ng-model: 绑定变量

（5）ng-repeat: 迭代循环 ng-repeat=“entity in list”

（6）ng-click : 点击指定某方法

（7）ng-if : 判断当条件成立时，显示div或span 里的内容

（8）ng-options : 指定下拉列表（select）的数据来源 ,语法格式如下：集合 成员.值属性 as 集合成员.文本属性 for 集合成员 in 集合：  
ng-options=“[c.id][] as c.city for c in obj”

（9）ng-checked : 用于复选框 ，返回值为true则选中 返回值为false则不选中

（10）ng-true-value : 当用户选中复选框，提交的值（默认是true）

（11）ng-false-value: 当用户取消选中复选框，提交的值（默认是false）