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. 实验吧——认真一点（绕过空格，逗号，关键字过滤等 sql盲注）

    题目地址:http://ctf5.shiyanbar.com/web/earnest/index.php 过滤和拦截了某些东西,我经过多次尝试,最终构造的是 1'=(ascii(mid((select ...

  2. qt 操作串口

    第三方类下载 https://sourceforge.net/projects/qextserialport/files/ 目录介绍 搭建工程 拷贝qextserialbase.cpp.qextser ...

  3. logger(一)slf4j简介及其实现原理

    一.slf4j简介 slf4j(Simple logging facade for Java)是对所有日志框架制定的一种规范.标准.接口,并不是一个框架的具体的实现,因为接口并不能独立使用,需要和具体 ...

  4. Asp.Net构架(Http请求处理流程)

    一:引言 我查阅过不少Asp.Net的书籍,发现大多数作者都是站在一个比较高的层次上讲解Asp.Net.他们耐心.细致地告诉你如何一步步拖放控件.设置控件属性.编写CodeBehind代码,以实现某个 ...

  5. Ubuntu拒绝root用户ssh远程登录

    sudo vim /etc/ssh/sshd_config 找到并用#注释掉这行:PermitRootLogin prohibit-password 新建一行 添加:PermitRootLogin y ...

  6. rz上传文件乱码

    问题 使用rz上传文件时,出现乱码,上传失败. 原因 文件中包含控制字符 解决方法 使用 rz -be -b:–binary  用binary的方式上传下载,不解释字符为ascii: -e:–esca ...

  7. Linux的yum管理

    前面介绍了软件的管理的方式rpm.但有个缺点,rpm不能解决依赖. 下面介绍的yum软件管理.可以完美的解决这个问题. 使用yum的方式管理rpm软件         优势:自动解决软件的依赖关系   ...

  8. [转]【response】HttpServletResponse接口

    创建时间:6.19 & 6.24 1．HttpServletResponse概述 我们在创建Servlet时会覆盖service()方法,或doGet()/doPost(),这些方法都有两个参 ...

  9. wordpress调用自定义post_type文章

    前面我们讲了wordpress添加post_type自定义文章类型,我们现在来讲一下如何把自定义文章调用出来,我们以product为例,虽然我们自定义好了 Post Type 同时也编写了一些内容,但 ...

  10. Git常用基础命令

    要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写.同他人协作开发某 个项目时,需要管理这些远程仓库 ...