之前于Angular第三方插件ngTable的官网demo上看到的例子，但苦于demo中联动全选为选中所有，项目中并不适用，因此做了下小小的修改，修改目的只是为实现其功能，方法不敢苟同，若有更加简便的方法对此进行修改，请大方提出指正，本人不胜感激！

好了，废话不多说，先上官网demo，说明其中缺陷。http://ng-table.com/#/formatting/demo-header-cell-full

如demo中所示，官网给的例子中点击全选时，全选为选中所有选项（即图中3页数据全被选中），而并不是选中当前页面选项。

以常理来说这并不符合正常逻辑，容易给用户造成误解（如点击全选删除数据时只想删除当前页，但却删除全部数据）。

因此做以下修改：为还原demo的样子，请允许我用bootstrap先简单做一个静态页面出来：

html：

<body>

	<div ng-app="myApp" class="container-fluid">

		<script type="text/ng-template" id="headerCheckbox.html">

			<input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all" value="" />

		</script>

		<div class="row">

			<div class="col-md-6" ng-controller="index as demo">

				<h3>ngTable</h3>

				<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">

					<colgroup>

						<col width="5%"/>

						<col width="55%"/>

						<col width="20%"/>

						<col width="20%"/>

					</colgroup>

					<tr ng-repeat="row in $data">

						<td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td>

						<td title="'Name'">{{row.name}}</td>

						<td title="'Age'">{{row.age}}</td>

						<td title="'Money'">{{row.money}}</td>

					</tr>

				</table>

			</div>

		</div>

	</div>

</body>

<script type="text/javascript" src="angular.js"></script>

<script type="text/javascript" src="ng-table.js"></script>

然后是js中的修改。

js代码：

var App = angular.module("myApp", ["ngTable"]);

App.controller("index", ['$scope', '$rootScope', 'NgTableParams',

  function($scope, $rootScope, NgTableParams) {

    /*

     * current:                 列表当前页

     * current_count:           列表当前页显示条数

     * self.checkboxes.checked: 全选

     * self.checkboxes.items:   当前选中个数用json形式保存

     * simpleList:              表格数据

     * */

    $rootScope.current = 1;

    $rootScope.current_count = 5;

    var self = this,

    simpleList = [

      {"id": 1, "name": "Nissim", "age": 41, "money": 454},

      {"id": 2, "name": "Mariko", "age": 10, "money": -100},

      {"id": 3, "name": "Mark", "age": 39, "money": 291},

      {"id": 4, "name": "Allen", "age": 85, "money": 871},

      {"id": 5, "name": "Dustin", "age": 10, "money": 378},

      {"id": 6, "name": "Macon", "age": 9, "money": 128},

      {"id": 7, "name": "Ezra", "age": 78, "money": 11},

      {"id": 8, "name": "Fiona", "age": 87, "money": 285},

      {"id": 9, "name": "Ira", "age": 7, "money": 816},

      {"id": 10, "name": "Barbara", "age": 46, "money": 44},

      {"id": 11, "name": "Lydia", "age": 56, "money": 494},

      {"id": 12, "name": "Carlos", "age": 80, "money": 193}

    ];

    self.checkboxes = {

      checked: false,

      items: {}

    };

    self.tableParams = new NgTableParams(

      {count: 5},

      {counts: [5, 10, 15], dataset: simpleList}

    );

    // watch 全选

    $scope.$watch(function() {

      return self.checkboxes.checked;

    }, function(value) {

      var total = ($rootScope.current_count * $rootScope.current > simpleList.length) ? simpleList.length : ($rootScope.current_count * $rootScope.current);

      angular.forEach(simpleList, function(data, index, array) {

        if (index >= ($rootScope.current - 1) * $rootScope.current_count && index < total) {

          self.checkboxes.items[array[index].id] = value;

        }

      });

    });

    // watch checkboxes.items

    $scope.$watch(function() {

      return self.checkboxes.items;

    }, function(values) {

      /**

       * checked:   选中个数

       * unchecked：未选中个数

       * total：    当前页总个数

       * length:    当前页范围

       */

      var checked = 0,

      unchecked = 0,

      total = ($rootScope.current_count * $rootScope.current > simpleList.length) ? simpleList.length - ($rootScope.current - 1) * $rootScope.current_count

      : $rootScope.current_count,

      length = ($rootScope.current_count * $rootScope.current > simpleList.length) ? simpleList.length : ($rootScope.current_count * $rootScope.current);

      angular.forEach(simpleList, function(data, index, array) {

        if (index >= ($rootScope.current - 1) * $rootScope.current_count && index < length) {

          checked   +=  (self.checkboxes.items[array[index].id]) || 0;

          unchecked += (!self.checkboxes.items[array[index].id]) || 0;

        }

      });

      if ((unchecked == 0) || (checked == 0)) {

        self.checkboxes.checked = (checked == total);

      }

      // grayed checkbox

      angular.element(document.getElementsByClassName("select-all")).prop("indeterminate", (checked != 0 && unchecked != 0));

    }, true);

    // watch 分页

    $scope.$watch(function() {

      return $rootScope.current;

    }, function(newValue, oldValue) {

      if (newValue != oldValue) {

        self.checkboxes.checked = false;

        self.checkboxes.items = {};

      }

    });

    // watch 当前页显示条数

    $scope.$watch(function() {

      return $rootScope.current_count;

    }, function(newValue, oldValue) {

      if (newValue != oldValue) {

        self.checkboxes.checked = false;

        self.checkboxes.items = {};

      }

    });

  }

]);

　　

如js代码中所示，多出了两个$rootScope值（current和current_count），因此在原有的ng-table.js中也需做相应修改：

在ng-table.js插件中541行的函数中，加入$rootScope。

并在该函数的

（1）this.page处添加$rootScope.current = params.page;以记录选中当前页；

（2）this.count处添加$rootScope.current_count = params.count;以记录当前显示条数；

至此修改完成，在点击全选时效果为选中当前页面选项，并且在修改显示条数的情况下进行选中清空处理。

demo地址：https://wang-sai.github.io/datalibrary/angular/ngtable-checkboxall.html

最后要说明的是，这个方法虽然可以完成相关功能，怎么说呢，完全是为实现功能添加的代码。

首先是改动了ngtable的源码，其次demo中的数据量并不大，在实际项目中数据量肯定是比较大的，少则几十页，多则上百页，有可能会出现$watch性能的问题。

Angular-ngtable联动全选的更多相关文章

  1. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  2. angular笔记_5(全选/反选)

    全选和反选 BUG:当鼠标点击其中一个选项后,在点击全选按钮,该选项失效 <!DOCTYPE html><html lang="en"><head&g ...

  3. Angular实现购物车全选

    直接上代码 <!DOCTYPE html> <html ng-app="myApp" > <head> <meta charset=&qu ...

  4. jQuery实现一个全选复选框联动效果

    类似邮件列表里的复选框 要求双向联动 ☛ [实现]: <body> <div> <input type="checkbox" name="c ...

  5. 全选与单选chekbox的自定义实现(angular框架)

    2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客. 项目中经常性的会遇到什么点击"全选"按钮,勾中所有"单选 ...

  6. jQuery应用实例3：全选、二级联动

    全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...

  7. angular实现表格的全选、单选、部分删除以及全部删除

    昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...

  8. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  9. DEV控件中GridView中的复选框与CheckBox实现联动的全选功能

    最初的界面图如图1-1(全选框ID: cb_checkall  DEV控件名称:gcCon ): 要实现的功能如下图(1-2  1-3  1-4)及代码所示: 图1-2 图1-3 图1-4 O(∩_∩ ...

随机推荐

  1. 我与A协

    大学毕业以后发现离曾经的圈子越来越远,非常怀念原来在A协和大家一起奋斗的日子,在这里写一篇文章,献给有很多美好回忆的A协,也献给渐渐远离A协的我. 首先,回顾一下我为什么会参与到A协的建设工作中来.我 ...

  2. 使用Angular2理由

    1. 组件化 组件化编程是web 发展的一个趋势,Angular2提供高效简单的组件开发方式,使程序开发更加关注业务逻辑的实现,而不用关心如何加载组件和模块,如何引用及依赖注入的实现等. 如下代码所示 ...

  3. windows Service

    用c#中创建一个windows服务非常简单,与windows服务相关的类都在System.ServiceProcess命名空间下. 每个服务都需要继承自ServiceBase类,并重写相应的启动.暂停 ...

  4. Huffman的应用_Huffman编码

    //最优二叉树 #include <iostream> #include <iomanip> using namespace std; //定义结点类型 //[weight | ...

  5. 单位圆盘的全纯自同构群Aut B(0,1)

    利用Schwarz引理可以求出单位圆盘$B(0,1)$的全纯自同构群${\rm Aut}B(0,1)$. 任取$a\in B(0,1)$,记$$\varphi_{a}(z)=\frac{a-z}{1- ...

  6. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  7. AngularJS介绍

    AngularJS介绍–AngularJS的前世今生 AngularJS是什么 在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...

  8. Chart图表

    这东西挺直观 封装个类 public class aaa { private string name; public string Name { get { return name; } set { ...

  9. WPF中的动画——（三）时间线（TimeLine）

    WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...

  10. jQuery插件（cookie存值）

    使用cookie插件后,可以很方便地通过cookie对象保存.读取.删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为: 保存:$.cookie(key,value):读取:$ ...