Angular多选、全选、批量选择操作实例代码

 更新时间:2017年03月10日 14:51:40   作者:smilingCoder  
列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,这篇文章主要介绍了Angular多选、全选、批量选择实例代码,有兴趣的可以了解一下。

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

首先来看html代码

<table cellpadding="0" cellspacing="0" border="0" class="datatable table table-hover dataTable">
      <thead>
      <tr>
        <th><input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"/></th>
        <th>姓名</th>
        <th>单位</th>
        <th>电话</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="item in content">
        <td><input type="checkbox" name="selected" ng-checked="isSelected(item.id)" ng-click="updateSelection($event,item.id)"/></td>
        <td>{{item.baseInfo.name}}</td>
        <td>{{item.orgCompanyName}}</td>
        <td>{{item.baseInfo.mobileNumberList[0].value}}</td>
      </tr>
      </tbody>
    </table>

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

一处是第3行 ng-click="selectAll($event)" ,用来做全选的操作; ng-checked="isSelectedAll() 用来判断当前列表内容是否被全选。

一处是第12行 ng-click="updateSelection($event,item.id) ,用来对某一列数据进行选择操作; ng-checked="isSelected(item.id) 用来判断当前列数据是否被选中。

然后需要在与该页面相对应的controller中实现与批量选择相关的方法

//创建变量用来保存选中结果
          $scope.selected = [];
          var updateSelected = function (action, id) {
            if (action == 'add' && $scope.selected.indexOf(id) == -1) $scope.selected.push(id);
            if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);
          };
          //更新某一列数据的选择
          $scope.updateSelection = function ($event, id) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            updateSelected(action, id);
          };
          //全选操作
          $scope.selectAll = function ($event) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            for (var i = 0; i < $scope.content.length; i++) {
              var contact = $scope.content[i];
              updateSelected(action, contact.id);
            }
          };
          $scope.isSelected = function (id) {
            return $scope.selected.indexOf(id) >= 0;
          };
          $scope.isSelectedAll = function () {
            return $scope.selected.length === $scope.content.length;
          };

controller中主要是对html中用到的几个方法的实现,相对来讲实现代码还是比较简洁易懂的。

多选效果展示如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅谈angular.js跨域post解决方案

    浅谈angular.js跨域post解决方案

    本篇文章主要介绍了浅谈angular.js跨域post解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 详解Angular之constructor和ngOnInit差异及适用场景

    详解Angular之constructor和ngOnInit差异及适用场景

    这篇文章主要介绍了详解Angular之constructor和ngOnInit差异及适用场景的相关资料,有兴趣的可以了解一下
    2017-06-06
  • Angular.js实现动态加载组件详解

    Angular.js实现动态加载组件详解

    这篇文章主要给大家介绍了关于Angular.js实现动态加载组件的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • AngularJS封装指令方法详解

    AngularJS封装指令方法详解

    这篇文章主要介绍了AngularJS封装指令方法,结合实例形式详细分析了AngularJS的功能、jQuery类库协作及组件封装的具体操作技巧,需要的朋友可以参考下
    2016-12-12
  • angular4强制刷新视图的方法

    angular4强制刷新视图的方法

    今天小编就为大家分享一篇angular4强制刷新视图的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • angular6.0开发教程之如何安装angular6.0框架

    angular6.0开发教程之如何安装angular6.0框架

    这篇文章主要介绍了angular6.0开发教程之如何安装angular6.0框架,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 详解angularjs跨页面传参遇到的一些问题

    详解angularjs跨页面传参遇到的一些问题

    这篇文章主要介绍了详解angularjs跨页面传参遇到的一些问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • AngularJS监听ng-repeat渲染完成的两种方法

    AngularJS监听ng-repeat渲染完成的两种方法

    这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • 详解AngularJS验证、过滤器、指令

    详解AngularJS验证、过滤器、指令

    这篇文章主要介绍了AngularJS验证、过滤器、指令的相关知识,angularJS中提供了许多的验证指令,可以轻松的实现验证,具体详情大家通过本文一起学习吧,需要的朋友可以参考下
    2017-01-01
  • AngularJS入门教程之过滤器详解

    AngularJS入门教程之过滤器详解

    本文主要讲解AngularJS 过滤器,这里整理了过滤器的相关资料并附示例代码,帮助大家学习AngularJS的知识,有需要的小伙伴可以参考下
    2016-08-08

最新评论