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. i春秋——“百度杯”CTF比赛 十月场——Vld（Vulcan Logic Dumper 、php opcode、sql 报错注入）

    打开题目看到提示 "do you know Vulcan Logic Dumper?" ,再查看源码看到"<!-- index.php.txt ?>" ...

  2. 搭建Ceph分布式存储

    环境: 系统 IP地址 主机名(登录用户) 承载角色 Centos 7.4 64Bit 1611 10.199.100.170 dlp(yzyu) ceph-client(root) admin-no ...

  3. Nacos 1.1.0发布，支持灰度配置和地址服务器模式

    https://nacos.io/zh-cn/blog/nacos%201.1.0.html

  4. 汉诺塔问题深度剖析（python实现）

    当我们学习一门编程语言的时候,都会遇到递归函数这个问题.而学习递归的一个经典案例就是汉诺塔问题.通过这篇文章,观察移动三个盘子和四个盘子的详细过程,您不仅可以深刻的了解递归,也更加熟悉了汉诺塔的游戏的 ...

  5. 201671010459 张旭辉 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 作业学习目标 (1)掌握软件项目评审会流程(2)反思总结课程学习内容 github仓库地址链接 [Git ...

  6. MyISAM引擎mysql5.6中大型网站数据库优化配置方案

    硬件服务器:Dell R710,双至强E5620 CPU.16G内存.6*500G硬盘   操作系统:CentOS5.5 X86_64 系统   Mysql版本:MySQL 5.6   适用于:日IP ...

  7. js日志组件封装

    js日志组件~~ 1 function Logger(level) { if (!(this instanceof Logger)) { return new Logger(); } var ERRO ...

  8. Anaconda3（1）Windows10下安装Anaconda3(64位)详细过程

    https://blog.csdn.net/ychgyyn/article/details/82119201 前言Anaconda指的是一个开源的Python发行版本,其包含了conda.Python ...

  9. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  10. 简要说明盒子模型和flex布局

    盒子模型:可以看做是一个盒子,包括外边距.边框.内边距.实际内容. flex布局:弹性布局,灵活性好. 当给元素设置display:flex时,它就是flex容器,它的所有子元素自动成为容器成员,称为 ...