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. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

  2. String类常用功能

    String类常用功能 判断: boolean equals(Object obj) boolean equalsIgnoreCase(String str) //忽略大小写 boolean star ...

  3. Object.assign的使用

    语法: Object.assign(target, ...sources)//target目标对象,sources源对象,返回值目标对象 使用说明: 如果目标对象中的属性具有相同的键,则属性将被源对象 ...

  4. CentOS 8 安装

    截止目前为止CentOS的最新版本为CentOS 8版本,接下来就介绍CentOS Linux 8.0.1905的安装过程 1. 安装CentOS 8 成功引导系统会显示如上图的界面: # 界面说明 ...

  5. 在ARM64位开发板上兼容ARM32位的可执行程序

    邮箱:pengdonglin137@163.com 参考:https://stackoverflow.com/questions/1706328/how-do-shared-libraries-wor ...

  6. centos7 安装 ffmpeg

    升级系统 yum install epel-release -yyum update -y 安装Nux Dextop Yum源 由于centos 没有官方软件包,我们可以使用第三方YUM源(Nux D ...

  7. 数据分析——python基础

    前言:python数据分析的基础知识,简单总结,主要是为了方便自己写的时候查看(你们可能看不太清楚T^T),发现有用的方法,随时补充,欢迎指正 数据分析专栏: 数据分析--python基础 数据分析- ...

  8. js的函数三角恋

    原创,转载请标明来源https://www.cnblogs.com/sogeisetsu/ js的函数三角恋 1.什么是构造函数 是专门用于创建对象的 对象就是object **** 1.什么是函数? ...

  9. 【GPU加速系列】PyCUDA（一）：上手简单操作

    PyCUDA 可以通过 Python 访问 NVIDIA 的 CUDA 并行计算 API. 具体介绍和安装可以参考 PyCUDA 官网文档和 pycuda PyPI. 本文涵盖的内容有: 通过 PyC ...

  10. 一个从tensorflow_1.14.0-gpu-py3-jupyter镜像生成公司实际需求的Dockerfile

    外部的标准镜像,肯定满足不了公司的实际要求咯~~ 所以,根据同事的需求,重新制作了这个包. 其中可用库为tensorflow,numpy, pandas,scikit-learn,jieba,gens ...