<!--
README:
代码可以直接复制到编辑器里面，到浏览器中操作。
思路：将每一行数据都封装到一个对象中，包括复选框是否选中的状态值。
代码还可优化，也可以扩展。比如：增加一个按钮，获取所有选中的行对象的id值，传递到后台进行批量的操作。
github:https://github.com/fandashi18
后续推出angularJS+nodeJS+requireJS+commonJS+jade+bootstrap前端工程，以及SSM模式的java后台工程配置与讲解
还有前端各种UI插件的使用，准备用插件做一个前端，再用原生技术做一个。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<br />
<div ng-app='myApp' ng-controller='myCtrl'>
<div class="container">
<div class="row">
<div class='col-md-10'>
<table class="table table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" ng-model='masterChecked' ng-click='checkMaster()' />
</th>
<th>id</th>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in personList">
<td>
<input type="checkbox" ng-checked='row.checked' ng-click='checkChild(row)' />
</td>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
//初始化表格数据
$scope.personList = [{
checked: false,
id: 1,
name: '赵云',
age: 50
}, {
checked: false,
id: 2,
name: '曹操',
age: 60
}, {
checked: false,
id: 3,
name: '大司马',
age: 50
}];
//主复选框选中事件
$scope.checkMaster=function(){
if($scope.masterChecked==true){
angular.forEach($scope.personList,function(row,index){
row.checked=false;
} );
}else{
angular.forEach($scope.personList,function(row,index){
row.checked=true;
} );
}
}
//子复选框选中事件
$scope.checkChild=function(row){
//根据选中状态，调正row.checked值
(row.checked==false)?row.checked=true:row.checked=false;
//若取消选中，则取消主复选框选中
if(row.checked==false){
$scope.masterChecked=false;
}else{
//若选中，判断主复选框是否需要选中
var temp=true;
angular.forEach($scope.personList,function(row,index){
//若子复选框有一个未选中，则主复选框不必选中
if(row.checked==false){
temp=false;
}
});
//若子复选框全部选中，则选中主复选框
$scope.masterChecked=temp;
}
}
});
</script>
</body>
</html>