AngularJS 之input checkbox全选、反选简单写法

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