<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<script src="angular/angular.min.js"></script>
<body ng-controller="myCtrl" >
<script type="text/javascript">
angular.module("myapp",[]).controller("myCtrl",["$scope",function($scope){
$scope.schools=[{"id":1,"sname":"南昌大学","sadress":"江西"},
{"id":2,"sname":"北京大学","sadress":"北京"},
{"id":4,"sname":"清华大学","sadress":"北京"},
{"id":3,"sname":"华南理工大学","sadress":"广东"},
{"id":5,"sname":"西南财经大学","sadress":"西川"},
{"id":6,"sname":"武汉大学","sadress":"湖北"}
];
//声明变量来控制表格的多选、全选、反选。初始化全选为false
$scope.check = {'chkAll':false,'chkItem':[]};
//初始化check.chkItem数组。只初始化一次。数组的元素个数与显示的数据有多少行一致。全部初始化为false。
$scope.initChkItem=function(){
//如果当前有数据,并且check.chkItem数组里面没值,则对check.chkItem进行初始化。下次进来则不再初始化(只初始化一次)
if($scope.check.chkItem.length==0 && $scope._array.length>0){
for(var i=0;i<$scope._array.length;i++){
//把每行数据的checkbox都初始化为false(未选中状态)
$scope.check.chkItem[i]=false;
}
}
}
/**
* 点击单条数据的checkbox
* @param vo 当前行的数据
* @param chkflag 当前行点击之前的选中状态
* @param index 当前行的索引号
*
*/
$scope.clickItem = function(vo,chkflag,index){
$scope.initChkItem();
//chkflag = chkflag == undefined ? false:chkflag;
$scope.check.chkItem[index] = !chkflag;
//当前选中就去做判断是否所有都选中,若是,则全选设为选中。
//当前取消选中,则直接把全选设为不选中
if(!$scope.check.chkItem[index]){
$scope.check.chkAll = false;
}else{
var isAllChecked = true;
for(var i=0;i<$scope.check.chkItem.length;i++){
if(!$scope.check.chkItem[i]){
isAllChecked = false;
break;
}
}
if(isAllChecked){
$scope.check.chkAll = true;
}
}
//TODO 改变选中的数组
}
//全选和全反选
$scope.clickAllObj=function(flag){
$scope.initChkItem();
for(var i=0;i<$scope.check.chkItem.length;i++){
$scope.check.chkItem[i]=flag;
}
//TODO 改变选中的数组
}
}]);
</script>
<table border="1">
<tr>
<td>
<thead>
<tr style="background: green;width: auto;">
<td>
<input type="checkbox" style="width: 30px;" ng-click="check.chkAll=!check.chkAll;clickAllObj(check.chkAll)" ng-checked="check.chkAll"/>
</td>
<td style="width: 400px;">
学校
</td>
<td style="width: 80px;">
地址
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="school in _array = (schools | filter:{'sadress':''}) track by $index" style="background: {{check.chkItem[$index]?'#FF83FA':'#ffffff'}}">
<td style="width: 30px;text-align: center;">
<input type="checkbox" id="{{'school'+($index+1)}}" ng-click="clickItem(school,check.chkItem[$index]==undefined?false:check.chkItem[$index],$index)" ng-checked="check.chkItem[$index]" />
</td>
<td style="width: 400px;" ng-click="clickItem(school,check.chkItem[$index]==undefined?false:check.chkItem[$index],$index)">
{{school.sname}}
</td>
<td style="width: 80px;">
{{school.sadress}}
</td>
</tr>
</tbody>
</td>
</tr>
</table>
</body>
</html>
评论11
最新资源