angularjs实现多选框分段全选效果实现

 更新时间:2023年06月30日 09:57:12   作者:Skywang  
这篇文章主要为大家介绍了angularjs实现多选框分段全选效果实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

angularjs 实现多选框分段全选效果

在前台开发过程中,列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,但是原理基本相同,本文主要来讲AngularJs如何简单的实现列表批量选择功能。

效果如下

html代码

<div class="form-group1" style="margin-top: 15px;">
  <div class="input-group">
     <div class="input-group-addon no-border" style="padding-left: 0px;float: left;">
        <p>角色权限:</p>
    </div>
  </div>
</div>
<div class="" ng-repeat="todotype in todolist" style="margin-bottom: 30px;">
  <div class="" style="display: flex;">
    <div class="" style="background-color: rgb(229,172,78);width: 10%;padding: 1px 5px;line-height: 25px;height: 28px;">
      <input style="margin-bottom: 8px;" type="checkbox" ng-model="$parent.selectAll[$index]" ng-click="changeAll($index)" />
        <span style="color: white;font-weight: 600;">
        {{todotype.type}} 
        </span>
      </div>
  <div class="" style="padding-left: 24px;width: 100%;">
    <div class="row">
      <div class="col-md-2 col-sm-2" ng-repeat="obj in todolist[$index].permissionList" style="margin-bottom: 10px;">
        <input type="checkbox" ng-click="funcChange($parent.$index)" ng-model="obj.isSelected" /> 
          <span style="line-height: 25px;">{{obj.name}}</span>                          
      </div>
     </div>
    </div>
  </div>
</div>

html里面简单建立一个表格,与批量选择相关的只有两处。

一处是ng-click="changeAll($index),用来做全选的操作;

ng-click="funcChange($parent.$index)"用来判断当前大类里内容是否被全选。

判断是否全选是用ng-model进行判断 第一处ng-model="$parent.selectAll[$index]"是判断这一大类是否全选;

ng-model="obj.isSelected"是判断每一大类的每一项的选择;

控制器里的代码js文件

// 获取数据 这里具体post请求就不写了 
                   $scope.todolist = res.data.data;
                        for(var i = 0; i < $scope.todolist.length; i++) {
                            angular.forEach($scope.todolist[i].permissionList, function(i) {
                                i.isSelected = false;
                            })
                        }
// 数据类型如下
    $scope.list = [{
                permissionList: [{
                        name: 'Golde',
                        //                  birthday: '2000-01-10',
                        isSelected: false
                    },
                    {
                        name: 'King',
                        //                  birthday: '1990-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Mark',
                        //                  birthday: '19890-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Marie',
                        //                  birthday: '2010-01-10',
                        isSelected: false
                    }
                ],
                type: "制造资源管理"
            }, {
                permissionList: [{
                        name: 'Golde1',
                        //                  birthday: '2000-01-10',
                        isSelected: false
                    },
                    {
                        name: 'King1',
                        //                  birthday: '1990-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Mark1',
                        //                  birthday: '19890-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Marie1',
                        //                  birthday: '2010-01-10',
                        isSelected: false
                    }
                ],
                type: "制造资源管理2"
            }, {
                permissionList: [{
                        name: 'Golde2',
                        //                  birthday: '2000-01-10',
                        isSelected: false
                    },
                    {
                        name: 'King2',
                        //                  birthday: '1990-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Mark2',
                        //                  birthday: '19890-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Marie2',
                        //                  birthday: '2010-01-10',
                        isSelected: false
                    }
                ],
                type: "制造资源管理3"
            }];
// 具体方法如下所示
       // 这里初始化数组 上来全为空
             $scope.selectAll = [];
            //      对于对象进行操作的时候(点击),会执行funcChange  
            //      判断对象数组中isSelected 是否为 true或false,在决定select是否为true  
            $scope.changeAll = function(index) { //全选/取消全选      
                angular.forEach($scope.todolist[index].permissionList, function(v, k) {
                    v.isSelected = $scope.selectAll[index];
                })
            };
            $scope.funcChange = function(index) { // 当所有都选中时  
                $scope.selectAll[index] = true;
                angular.forEach($scope.todolist[index].permissionList, function(v, k) {
                    $scope.selectAll[index] = $scope.selectAll[index] && v.isSelected;
                });
            };

具体逻辑已经写得很清楚

以上就是angularjs实现多选框分段全选效果实现的详细内容,更多关于angularjs多选框分段全选的资料请关注脚本之家其它相关文章!

相关文章

  • 详解Angular组件之投影

    详解Angular组件之投影

    在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
    2021-05-05
  • Angular X中使用ngrx的方法详解(附源码)

    Angular X中使用ngrx的方法详解(附源码)

    ngrx是一套利用RxJS的类库,下面这篇文章主要给大家介绍了关于Angular X中使用ngrx的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • Angular2实现组件交互的方法分析

    Angular2实现组件交互的方法分析

    这篇文章主要介绍了Angular2实现组件交互的方法,结合实例形式总结分析了Angular2中组件交互的相关操作技巧与注意事项,需要的朋友可以参考下
    2017-12-12
  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果,本文通过示例代码详细介绍了实现过程,对大家学习AngularJS具有一定参考借鉴价值,有需要的朋友们可以参考借鉴。
    2016-09-09
  • Angularjs 自定义服务的三种方式(推荐)

    Angularjs 自定义服务的三种方式(推荐)

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务。这篇文章主要介绍了Angularjs 自定义服务的三种方式,非常不错,需要的朋友可以参考下
    2016-08-08
  • Angular.JS学习之依赖注入$injector详析

    Angular.JS学习之依赖注入$injector详析

    随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维。在AngularJS中也有依赖注入的概念,像spring中的依赖注入,但是又有所不同。Angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便。
    2016-10-10
  • 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    最近做项目时遇到了需要用到多选按钮选中触发事件的功能,小编试着手写一个指令,具体实现代码大家参考下本文吧
    2017-07-07
  • AngualrJS中的Directive制作一个菜单

    AngualrJS中的Directive制作一个菜单

    本文给大家介绍AngualrJS中的Directive制作一个菜单,涉及到angularjs directive相关知识,本文介绍的非常详细,具有参考借鉴价值,特此分享供大家学习
    2016-01-01
  • Angular 服务器端渲染应用常见的内存泄漏问题小结

    Angular 服务器端渲染应用常见的内存泄漏问题小结

    这篇文章主要介绍了Angular 服务器端渲染应用一个常见的内存泄漏问题,主要包括屏幕闪烁问题,出现闪烁的原因,在于 Angular 不知道如何重用它在服务器上成功渲染的内容,本文给大家介绍的非常详细,需要的朋友一起学习下吧
    2022-06-06
  • AngularJS入门教程(零):引导程序

    AngularJS入门教程(零):引导程序

    这篇文章主要介绍了AngularJS入门教程(零):引导程序,本文是系列文章中的一篇,本系列文章用开发一个AngularJS应用来讲解,需要的朋友可以参考下
    2014-12-12

最新评论