最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选。

实现效果

1.点击全选checkbox可以切换全选和全部清空

2.点击列表中的checkbox,当全部选中时全选选中

3.在全选状态下点击列表中的checkbox将其置为非选中状态时全选checkbox也变为非选中状态

一开始看到是angular项目上面加全选以后不造如何下手。

步骤一:

然后就上网找资料,发现一个很不错的demo,结果把它放到项目中时发现它实现不了需求2和3,当时以为是自己的写法有问题,又去玩了下那个demo,发现那个demo只能实现功能1。

demo地址:demo案例

教训:以后遇到demo要先全部玩过以后再放到项目里面用。

步骤二:

然后后面又找到一个博客,这个是里面的方法可以完美实现我的需求。我采用的是方法3放到项目中进行的验证,在此把所用部分代码贴出来。到项目里面的时候根据项目实际情况替换参数即可。

博客地址:成功案例博客

成功案例:

html

<div ng-controller="myController">
<label for="flag">全选
<input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
<span>{{id}}</span>
</li>
</ul>
</div>

angular

var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
$scope.list = [
{'id': 101},
{'id': 102},
{'id': 103},
{'id': 104},
{'id': 105},
{'id': 106},
{'id': 107}
];
$scope.m = [];
$scope.checked = [];
$scope.selectAll = function () {
if($scope.select_all) {
$scope.checked = [];
angular.forEach($scope.list, function (i) {
i.checked = true;
$scope.checked.push(i.id);
})
}else {
angular.forEach($scope.list, function (i) {
i.checked = false;
$scope.checked = [];
})
}
console.log($scope.checked);
};
$scope.selectOne = function () {
angular.forEach($scope.list , function (i) {
var index = $scope.checked.indexOf(i.id);
if(i.checked && index === -1) {
$scope.checked.push(i.id);
} else if (!i.checked && index !== -1){
$scope.checked.splice(index, 1);
};
}) if ($scope.list.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.checked);
}
}]);

angularJS全选功能实现的更多相关文章

  1. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  2. C# winform中的datagridview控件标头加入checkbox,实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  3. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  4. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  5. Android ListView条目全选功能,不用checkbox实现!

    大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...

  6. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  7. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  8. Java Swing 如何实现记事本中“编辑”菜单下的 剪切,复制,粘贴,删除,全选 功能

    这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l)  给JButton添加一个鼠标点击监听器l ...

  9. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

随机推荐

  1. HDU2647

    第一道逆拓扑纪念一下... #include<iostream> #include<cstdio> #include<cstring> #include<cm ...

  2. 在VS2013中使用Log4net

    大致分为3个步骤 引用Log4net

  3. makefile编写要点

    1.wildcard : 扩展通配符 2.notdir : 去除路径 3.patsubst :替换通配符 格式:$(patsubst <pattern>,<replacement&g ...

  4. NIO NIO.2

    An NIO.2 primer, Part 1: The asynchronous channel APIs http://blog.arganzheng.me/posts/java-network- ...

  5. EnumRemarkAttribute,获取属性值

    首先自定义一个RemarkAttribute [html] view plain copy using System;  using System.Collections.Generic;  usin ...

  6. 在asp.net中显示PDF的方法:

    来源:http://www.cnblogs.com/tengs2000/archive/2009/02/23/1396646.html 一.直接显示,使用的还是原页面的URL Response.Con ...

  7. 首页使用page类完成生成页面内容的大部分工作

    fs2在处理异常及资源使用安全方面也有比较大的改善.fs2 Stream可以有几种方式自行引发异常:直接以函数式方式用fail来引发异常.在纯代码里隐式引发异常或者在运算中引发异常,最开始只是我自己浏 ...

  8. TFS下的源代码控制

    以下主要描述了: TFS源代码控制系统的基本场景 如何把一个项目添加到源代码管理中 如何与服务器同步 如何做Check-In 如何做分支与合并 什么是上架与下架 我们知道工作项是项目管理的基本元素,但 ...

  9. AXIS最佳实践

    前言: Axis是apache一个开源的webservice服务,需要web容器进行发布.本节主要用于介绍使用Axis开发webservice,包括服务端的创建.webservice的部署.客户端的调 ...

  10. MyBatis的动态SQL详解

    MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑,本文详解mybatis的动态sql,需要的朋友可以参考下 MyBatis 的一个强大的特性之一通常是它 ...