angularJS全选功能实现
最近在做的一个项目要增加全选和反选功能,之前只做过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全选功能实现的更多相关文章
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- C# winform中的datagridview控件标头加入checkbox,实现全选功能。
/// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...
- jquery实现全选功能
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...
- Form - CHECKBOX全选功能
FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...
- Android ListView条目全选功能,不用checkbox实现!
大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- S全选功能代码
JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...
- Java Swing 如何实现记事本中“编辑”菜单下的 剪切,复制,粘贴,删除,全选 功能
这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l) 给JButton添加一个鼠标点击监听器l ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
随机推荐
- java序列化知识整理
1. 什么是序列化? 序列化就是只把一个对象串行化成一个字节流,用于网络传输或者持久化. 2. 序列化的使用场景? a). 把内存中的对象持久化到文件或者数据库中: b). 对象在网络上传输. 3. ...
- jsp xml servlet
什么都懂一点,什么都不精通!!
- 全面解析sizeof(上) 分类: C/C++ StudyNotes 2015-06-15 10:18 188人阅读 评论(0) 收藏
以下代码使用平台是Windows7 64bits+VS2012. sizeof是C/C++中的一个操作符(operator),其作用就是返回一个对象或者类型所占的内存字节数,使用频繁,有必须对齐有个全 ...
- 经验分享:Linux 双网卡SNAT和DNAT映射本地端口出外网
A 机器 网卡1 公网IP网卡2 内网 B 机器网卡1 内网 如果想把公网端口P1 映射为内网B机器端口P2 iptables -t nat -A PREROUTING -d [A公网地址] -p ...
- 游戏AI框架
- Lua学习----Lua基础数据类型
前言 Lua有6中数据类型,分别是nil(空).boolean(布尔).number(数字).string(字符).table(表).function(函数) 在Lua中可以使用type函数来返回一个 ...
- powerdesigner导出word
1.网上下载word模板,或者是自制模板 2.报告->导出,选择刚才下载的模板,导出即可
- .pyc是个什么鬼?
1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在.如果是解释型语言, ...
- 写出形似QML的C++代码
最开始想出的标题是<Declarative C++ GUI库>,但太标题党了.只写了两行代码,连Demo都算不上,怎么能叫库呢……后来想换掉“库”这个字,但始终找不到合适词来替换.最后还是 ...
- 通过宏判断VS编译版本以及系统平台
MSC_VER 定义编译器的版本.下面是一些编译器版本的_MSC_VER值(参见扩展阅读中的参考文献2的链接) MSVC++ 12.0 _MSC_VER == 1800 (Visual Studio ...