我们在使用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