我们在使用jQuery或者原生JS全选反选功能使用type="checkbox"自带属性checked来完成,
当然AngularJS一样可以通过ngChecked或者ngModel配合ngChange完成需求。
正文开始:
最完整的checkbox全选/反选需求:
①点击列表头部全选按钮完成表格中所有checkbox全部选中或者全部不选
②当表格中至少有一个未选中时,表头中的checkbox状态显示未选中
③手动选中表格中所有checkbox时,表头中的checkbox状态选中
HTML:
<table><tr><td><input type="checkbox" ng-model="select_all" ng-change="selectAll()" /></td><td>姓名</td><td>性别</td><td>年龄</td><td>联系方式</td><td>...</td></tr><tr ng-repeat="user in users"><td><input type="checkbox" ng-model="user.checked" ng-change="selectOne()" /></td><td ng-bind="user.name"></td><td ng-bind="user.sex"></td><td ng-bind="user.age"></td><td ng-bind="user.telphone"></td><td>...</td></tr></table>
JS:
angular.module('myApp',[]).controller('myCtroller',['$scope',function($scope){//全选、反选$scope.selectAll = function(){$scope.checked = [];//定义空数组if($scope.select_all){angular.forEach($scope.users, function(user){user.checked = true;$scope.checked.push(user.id);})}else{angular.forEach($scope.users, function(user){user.checked = false;$scope.checked = [];//置空})}}//单选交互$scope.selectOne = function(){$scope.checked = [];//定义空数组angular.forEach($scope.users, function(user){if(user.checked === true){$scope.checked.push(user.id);}else{$scope.checked.splice(user.id, 1);}})if($scope.checked.length == $scope.users.length){$scope.select_all = true;}else{$scope.select_all = false}}}])
效果:
以上就是实现全选反选和单选交互的代码,代码较多,但是读起来逻辑清晰,加油!
更多功能实例源码下载地址:ngDemo