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. powershell ssh-agent 无法工作

    windows 10的powershell已经支持open-ssh的功能. 但是运行get-service ssh-agent似乎显示的stopped. 如下: PS C:\WINDOWS\syste ...

  2. HTML 统一资源定位器

    URL 也被称为网址. URL 可以由单词组成,比如 “w3school.com.cn”,或者是因特网协议(IP)地址:192.168.1.253.大多数人在网上冲浪时,会键入网址的域名,因为名称比数 ...

  3. maven 镜像仓库 setting.xml修改 & 手动导入的包如何加到maven里面

    如果不知道maven安装路径IDEA中打File->Settings   再点Build->Maven右边看maven安装路径,打开这个路径,再打开conf/settings.xml文件 ...

  4. ES6 Class(类)(九)

    一.Class类1.构造函数 constructor(){} 说明:a.如果没有重新定义带参数的构造函数,类会默认为我们提供一个不带参数的隐式构造函数b.在创建类的实例时会自动调用类中的构造函数 2. ...

  5. leetcode之有效的括号(20)

    题目: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符 ...

  6. sqlmap选项卡介绍及常用语句

    sqlmap的使用方式:python sqlmap.py [options]: sqlmap中一共有以下十六个选项卡: 1.帮助选项卡: 2.Target(目标选项卡): 3.Request(请求选项 ...

  7. Python基础（二）--基本数据类型、格式化输出、基本运算符

    一.基本数据类型 1.数字类型 #int整型 定义:age=10 #age=int(10) 用于标识:年龄,等级,身份证号,qq号,个数 #float浮点型 定义:salary=3.1 #salary ...

  8. ubuntu,安装、配置和美化（1）

    ubuntu linux 1.前言 1.1关于Ubuntu Linux Ubuntu是一个以桌面应用为主的Linux操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu"一词,意思是“ ...

  9. __attribute__((weak))

    情况是这样的,碰到一个棘手的问题:我们不确定外部模块是否提供一个函数func,但是我们不得不用这个函数,即自己模块的代码必须用到func函数: extern int func(void); ..... ...

  10. Windows C盘扩容

    工具:大白菜pe1.将F盘数据拷贝放其他盘,并格式化F盘.2.进入大白菜PE,使用DiskGenius工具,右键C盘图示->扩容->C盘,继续其他操作.(其中,需将F盘释放为未使用,然后将 ...