angularjs实现 checkbox全选、反选的思考
2016-08-07 18:09
357 查看
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使。
好长时间没写代码,感觉好多都不会了。
感谢这周没有单休,我能看熬夜看奥运了。我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间在家憋一篇博文,顺便在家加班写项目的东西。
不加班万岁万岁!!!(求领导看到!哈哈)
然后说正题吧!!!
中国队加油!中国队加油!!!
好吧 真的是正题!!!
1 还有个总的checkbox 负责全选和反选
2 当每一项开头都选中checkbox的时候,上面的全选自动选上
3 当全选后,取消其中一项的checkbox,全选取消
发现个不错的网上案例like this > demo
感觉非常符合我的需求,但是看到demo。
开始查了下checkbox在angularjs里面的用法和ng-checked,发现如果用了ng-checked 目测可以实现
html
js
看来是能用ng-click 或者 ng-change了
html
js
推荐第三种方法!以上
参考
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
好长时间没写代码,感觉好多都不会了。
感谢这周没有单休,我能看熬夜看奥运了。我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间在家憋一篇博文,顺便在家加班写项目的东西。
不加班万岁万岁!!!(求领导看到!哈哈)
然后说正题吧!!!
中国队加油!中国队加油!!!
好吧 真的是正题!!!
需求
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全选、反选的思考
- angularjs实现 checkbox全选、反选的思考
- angularJs 实现checkbox全选和多选
- AngularJs实现checkbox的全选、全取消
- JavaScript实现GridView中添加CheckBox列(全选与否)
- JavaScript实现GridView中添加CheckBox列(全选与否)
- ASP.NET2.0中GridView加入CheckBox实现全选!
- DataGrid中的添加CheckBox实现全选/单选【原创】
- GridView中实现类邮件的CheckBox全选功能
- 用javascript实现treeview上的checkbox全选功能
- ASP.NET2.0下利用javascript实现TreeView中的checkbox全选!
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- javascript实现datagrid客户端checkbox列的全选,反选
- Javascript实现在DataGrid上的CheckBox全选和取消
- 给DataGrid添加CheckBox列、DataGrid列头CheckBox、全选按钮实现服务器端全选
- javascript 实现 全选全消容器内的checkbox 通用函数
- javascript实现datagrid客户端checkbox列的全选,反选
- DataGrid中内嵌CheckBox的全选的服务器端实现!
- WinForm DataGrid 中在 DataGridBoolColumn 的列标题上加一个 CheckBox 实现全选和全不选
- javascript实现datagrid客户端checkbox列的全选,反选