angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使。
好长时间没写代码,感觉好多都不会了。
感谢这周没有单休,我能看熬夜看奥运了。我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间在家憋一篇博文,顺便在家加班写项目的东西。
不加班万岁万岁!!!(求领导看到!哈哈)
然后说正题吧!!!
中国队加油!中国队加油!!!
好吧 真的是正题!!!
需求
1 还有个总的checkbox 负责全选和反选
2 当每一项开头都选中checkbox的时候,上面的全选自动选上
3 当全选后,取消其中一项的checkbox,全选取消
实践
我表示刚开始我是不会的!!!
思路1 上网查找demo
然后开始查资料
发现个不错的网上案例like this > demo
感觉非常符合我的需求,但是看到demo。
缺点: 没玩几下就发现无法符合需求2、3。但是貌似1 是可以实现的。
- 思路2 ng-checked
开始查了下checkbox在angularjs里面的用法和ng-checked,发现如果用了ng-checked 目测可以实现
html
<div ng-controller="myController">
<label for="flag">全选
<input id="flag" type="checkbox" ng-model="select_all" ng-click="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="m[i.id]" ng-checked = "select_one" ng-click="selectOne(m[i.id])">
<span>{{i.id}}</span>
</li>
</ul>
</div>
js
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.select_one = true;
$scope.checked = [];
angular.forEach($scope.list, function (i, index) {
$scope.checked.push(i.id);
$scope.m[i.id] = true;
})
}else {
$scope.select_one = false;
$scope.checked = [];
$scope.m = [];
}
console.log($scope.checked);
};
$scope.selectOne = function (select) {
angular.forEach($scope.m , function (i, id) {
var index = $scope.checked.indexOf(id);
if(i && index === -1) {
$scope.checked.push(id);
} else if (!i && 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);
}
}]);
}]);
缺点 参考 not-binding-to-ng-checked-for-checkboxes
大概意思说 如果你用了ng-checked 就是默认它最初定义就是true, 因此就没有必要使用ng-model了。简单说来就是ng-model和ng-checked不需要同时用。
看来是能用ng-click 或者 ng-change了
思路3 给数组里面每一个list 绑定checked 的属性
这个想法也是联想到公司之前的一个大牛的写的一个关于checkbox的指令。
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>
js
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);
}
}]);
推荐第三种方法!以上
参考
- http://www.cnblogs.com/wohenxion/p/4624218.html
- https://docs.angularjs.org/api/ng/directive/ngChecked
- http://karatejb.blogspot.com/2015/07/angularjs-checkbox.html
- http://stackoverflow.com/questions/16601018/angularjs-ng-model-not-binding-to-ng-checked-for-checkboxes
angularjs实现 checkbox全选、反选的思考的更多相关文章
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- checkbox 全选反选实现全代码
//跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...
- C# WinForm中实现CheckBox全选反选功能
今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery学习笔记(4)--checkbox全选反选
可能有浏览器兼容性,注意html里的checked是一个属性,存在就默认选中. <!DOCTYPE html> <html lang="en"> <h ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
- jquery checkbox 全选反选代码只能执行一遍,第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
随机推荐
- 大数运算Swift
前几天开始,打算用Swift写大数的运算,加法跟乘法都已经写好了,写减法发现,真是难,感觉有可能是我的想法不对?不不不我相信我的逻辑. 首先把数字分成小数部分跟整数部分,再遍历一下,识别当前的结果,是 ...
- NSAssert的使用
NSAssert的使用 苹果在foundation.framework中定义了这么一个宏: #define NSAssert(condition, desc, ...) 第一个参数为一个条件判 ...
- Python显示函数调用堆栈
网上找到如下几个思路: 1.用inspect模块 2.用sys._getframe模块 3.用sys.exc_traceback,先抛一个异常,然后抓出traceback #!/usr/bin/env ...
- 用文件模拟CMOS保存数据
Hi3520D 芯片的内置CMOS最多只有5个字节可以用,但是我需要保存的数据有很多. 其中一个解决办法是:可以把其他需要保存的数据放到一个配置文件中.每次写的时候写到配置文件,用的时候再从配置文件读 ...
- sge学习 (转)
转自http://biancheng.dnbcw.info/linux/417992.html 命令: qsub - submit a batch job to Grid Engine. qsh ...
- 新冲刺Sprint3(第三天)
一.Sprint会议 更新商品价格.商品描述功能已经完成了,搜索商品功能也正在准备了. 以下是部分功能真机测试下的效果图: 二.Sprint周期 看板: 燃尽图:
- http和htpps
http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议. HTTPS 基于安全套接字层的超文本传输协议 或者是 HTTP over SSL **HTTP 和 HTTPS相同 ...
- C++资料收集&整理
类别 地址 ZLib c++ zlib(qt)压缩与解压缩 STL STL学习之map容器(2)_insert Basic std::nothrow new (nothrow) T() 的原理 C++ ...
- lua脚本教程
--[[工具准备 1.一个支持UTF8无BOM编码的工具,例如:notepad++ 2.一个多文件搜索关键字的工具,例如:File Seeker 3.Eluna对应端的源码 ]]-- --[[网站相关 ...
- EF学习笔记——通用增删改查方案
http://blog.csdn.net/leftfist/article/details/25005307 我刚接触EF未久,还不知道它有什么强大之处,但看上去,EF提供了一般的增删改查功能.以往用 ...