AngularJS 的全选、反选实现

一、需求

  • 要使用 AngularJS 实现 checkbox 的全选、反选。
  • 其中所有项都选中，则全选的 checkbox 也选中。
  • 有一项没有选中，全选的 checkbox 不选中。
  • 点击反选按钮，所有项反选，全选的checkbox 视情况而定，如果再所有项都没有选中的情况下反选等同于全选。

二、思路

  1. 需要获取全选 checkobx 的选中状态。
  2. 需要获取每个项 checkbox 的状态。
  3. 需要获取所有选中的 checkbox 的ng-model。
  4. 需要获取所有选项的数量。（用于和 3 进行比较，来判断是否全部选中）
  5. 需要获取反选按钮的状态，然后所有选中的 checkbox 的 ng-model 置反。

三、实现

  1. index.html

    <!DOCTYPE html>
    
<html>
    
	<head>
    
		<meta charset="utf-8" />
    
		<title>全选与反选Demo</title>
    
		<script src="js/angular.min.js"></script>
    
		<script src="js/index.js"></script>
    
	</head>
    
	<body ng-app="demo" ng-controller="indexController" >
    
		<ul>
    
			<li><input type="checkbox" ng-model="sellect_all" ng-click="selectAll($event, list)">全选 <input type="button" ng-model="invert_all" ng-click="invertAll($event, list)" value="反选"></li>
    
			<li ng-repeat="entity in list">
    
				<input type="checkbox" ng-model="select_one[entity.id]" ng-click="selectOne($event,entity.id, list)">{{entity.value}}
    
			</li>
    
		</ul>
    
	</body>
    
</html>

  2. index.js

    var app = angular.module('demo',[]);

app.controller("indexController",function($scope){
    
	// 自定义数据列表
    
	$scope.list = [{"id": "1","value": "a"},{"id": "2","value": "b"},
    
					{"id": "3","value": "c"},{"id": "4","value": "d"},
    
					{"id": "5","value": "e"}];

	$scope.selectIds=[];// 选中的ID集合
    
	$scope.select_one=[]; // 单项是否选中状态集合，以 [{"1":true}...] 的方式存在，实际开发中，id 可能不是数字
    
	$scope.sellect_all = false; // 全选按钮是否选中
    
	$scope.invert_all = false; // 反选按钮是否选中

	// 全选功能
    
	$scope.selectAll = function($event, list) {
    
		// 因为绑定的 sellect_all 有滞后，所以让其等于 $event.target.checked
    
		$scope.sellect_all = $event.target.checked;

		if ($scope.sellect_all) {
    
			angular.forEach(list, function(value) {
    
				$scope.selectIds.push(value.id);
    
				$scope.select_one[value.id] = true;
    
			})
    
		} else {
    
			// 实现全不选功能
    
			$scope.selectIds=[];
    
			$scope.select_one=[];
    
		}
    
	}

	// 反选功能
    
	$scope.invertAll = function($event, list) {
    
		$scope.invert_all = $event.target.checked;
    
		// 实现反选功能
    
		$scope.selectIds=[];
    
		angular.forEach(list, function(value) {
    
			$scope.select_one[value.id] = !$scope.select_one[value.id];
    
			if ($scope.select_one[value.id]) {
    
				$scope.selectIds.push(value.id);
    
			}
    
		})
    
		checkAll();
    
	}

	// 单项checkbox选择功能
    
	$scope.selectOne = function($event, id, list) {
    
		if($event.target.checked){//如果是被选中,则增加到数组
    
			$scope.selectIds.push( id);
    
		}else{
    
			var idx = $scope.selectIds.indexOf(id);
    
			  $scope.selectIds.splice(idx, 1);//删除
    
		}
    
		checkAll();
    
	}

	// 检查是否全选
    
	checkAll = function() {
    
		// 如果按钮已全部被选，就使全选按钮选中，之所以进行非0判断，是考虑到了在实际环境中数据是服务器响应的。
    
		if ($scope.selectIds.length != 0 && $scope.list.length == $scope.selectIds.length) {
    
			$scope.sellect_all = true;
    
		} else {
    
			// 如果有的按钮没有被选中，就取消全选
    
			 $scope.sellect_all = false;
    
		}
    
	}
    
});

  3. 实现效果

AngularJS 的全选、反选实现的更多相关文章

  1. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...

  3. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  5. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  6. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  7. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  8. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  9. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

随机推荐

  1. 响应式开发 纯CSS实现隐藏菜单栏

    // 将要隐藏的菜单设置 display: block; // 然后在菜单上面设置一个点击选项,如“菜单”<label for="toggle-checkbox" id=&q ...

  2. Spring常用注解之一

    Spring中的常用注解 @Component 把普通 pojo 实例化到 Spring 容器中,相当于配置文件中的 泛指各种组件,就是说当我们的类不属于各种归类的时候(不属于@Controller. ...

  3. 【案例】电子生产中的排程问题如何解决？APS助力智能化排产

    共进电子是典型的消费类电子制造企业,以ODM业务为主,立足双O(OEM/ODM),发展自主品牌.其中,生产模式特点包括: 批量制造.多品种小批量.面向订单生产: 产品结构复杂,设计变更频繁:生产计划复 ...

  4. 理解AMD ，CMD，CommonJS规范

    https://blog.csdn.net/xcymorningsun/article/details/52709608 理解AMD ,CMD,CommonJS规范 2016年09月30日 10:33 ...

  5. nginx之旅(第二篇):nginx日志管理、nginx防盗链、nginx虚拟主机

    一.nginx日志管理 Nginx访问日志主要有两个参数控制 1) log_format #用来定义记录日志的格式(可以定义多种日志格式,取不不同名字即可) log_format log_name s ...

  6. spring项目使用mave将第三方jar包打进war包中

    背景:一个标准的ssm项目,需要使用到第三方jar,现需要将项目发布到liunx的服务器上,将项目打成war包,第三方war包也需要打进去 首先是直接打包,发现第三方jar包并没有打进去......蛋 ...

  7. 《linux就该这么学》课堂笔记20 LNMP架构部署动态网站环境

    源码包安装程序 使用源码包来安装服务程序具有两个优势. 源码包的可移植性非常好,几乎可以在任何Linux系统中安装使用,而RPM软件包是针对特定系统和架构编写的指令集,必须严格地符合执行环境才能顺利安 ...

  8. 《linux就该这么学》课堂笔记13 网络会话、ssh、远程会话

    1.常见的网卡绑定驱动有三种模式—mode0.mode1和mode6 mode0(平衡负载模式):平时两块网卡均工作,且自动备援,但需要在与服务器本地网卡相连的交换机设备上进行端口聚合来支持绑定技术. ...

  9. hdu2126 类01背包（三维数组的二维空间优化）

    题目描述: 对于给出的n个物品,每个物品有一个价格p[i],你有m元钱,求最多能买的物品个数,以及有多少种不同的方案 题目分析: 类似01背包的题目,一般的01背包问题我们遇到的是求n个物品,有m的容 ...

  10. VIJOS-P1146 宿舍里的故事之五子棋

    洛谷 P1479 宿舍里的故事之五子棋 洛谷传送门 JDOJ 1311: VIJOS-P1146 宿舍里的故事之五子棋 JDOJ传送门 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何 ...