<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//数组
$scope.arr = [{
id:1,
name:"小红",
age:20,
sex:"女",
checked:"false"
},{
id:2,
name:"欢欢",
age:15,
sex:"男",
checked:"false"
},{
id:3,
name:"慧慧",
age:25,
sex:"女",
checked:"false"
},{
id:4,
name:"仁仁",
age:32,
sex:"男",
checked:"false"
}];
//计数器
var a = 0;
//全选状态的初始值
$scope.checkAll = false;
//全选的点击事件
$scope.selectAll = function(){
if($scope.checkAll == true){
//如果全选的按钮选中了,把所有的小按钮都选中
for(var i=0;i<$scope.arr.length;i++){
//所有的状态变成true
$scope.arr[i].checked = true;
//计数器加1
a++;
}
}else{
//取消选中按钮,所有的都取消
for(var i=0;i<$scope.arr.length;i++){
//所有的状态变成true
$scope.arr[i].checked = false;
//取消选中再--
a--;
}
}
};
//反着全选的事件
$scope.selectc = function(index){
//如果当前项选中了 ,计数器++
if($scope.arr[index].checked==true){
a++;
}else{
//如果没选中,,计数器--
a--;
}
//如果计数器长度等于数组长度,全选中了,,就把全选的按钮也选中
if(a==$scope.arr.length){
$scope.checkAll=true;
}else{
$scope.checkAll= false;
}
};
//点击 删除所选 按钮的事件
$scope.deletePerson = function(){
//alert("6");
if(a==0){
//一个也没选中
alert("啥都没选");
}else{
//a数量大于0
for(var i=0;i<$scope.arr.length;i++){
if($scope.arr[i].checked==true){
//遍历过程中,如果选中了就删除
$scope.arr.splice(i,1);
//必须写i--,因为可能删除了当前那一行以后,,下标超出去了
i--;
a--;
}
}
$scope.checkAll = false;
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<button ng-click="deletePerson()">删除选中项</button>
<br /><br />
<table border="1" cellpadding="10" cellspacing="0" width="500px">
<thead>
<th>
<input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>全选
</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tr ng-repeat="x in arr" align="center">
<td><input type="checkbox" ng-model="x.checked" ng-click="selectc($index)"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
</tr>
</table>
<div ng-repeat="x in arr">
<span>{{x.checked}}</span>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//数组
$scope.arr = [{
id:1,
name:"小红",
age:20,
sex:"女",
checked:"false"
},{
id:2,
name:"欢欢",
age:15,
sex:"男",
checked:"false"
},{
id:3,
name:"慧慧",
age:25,
sex:"女",
checked:"false"
},{
id:4,
name:"仁仁",
age:32,
sex:"男",
checked:"false"
}];
//计数器
var a = 0;
//全选状态的初始值
$scope.checkAll = false;
//全选的点击事件
$scope.selectAll = function(){
if($scope.checkAll == true){
//如果全选的按钮选中了,把所有的小按钮都选中
for(var i=0;i<$scope.arr.length;i++){
//所有的状态变成true
$scope.arr[i].checked = true;
//计数器加1
a++;
}
}else{
//取消选中按钮,所有的都取消
for(var i=0;i<$scope.arr.length;i++){
//所有的状态变成true
$scope.arr[i].checked = false;
//取消选中再--
a--;
}
}
};
//反着全选的事件
$scope.selectc = function(index){
//如果当前项选中了 ,计数器++
if($scope.arr[index].checked==true){
a++;
}else{
//如果没选中,,计数器--
a--;
}
//如果计数器长度等于数组长度,全选中了,,就把全选的按钮也选中
if(a==$scope.arr.length){
$scope.checkAll=true;
}else{
$scope.checkAll= false;
}
};
//点击 删除所选 按钮的事件
$scope.deletePerson = function(){
//alert("6");
if(a==0){
//一个也没选中
alert("啥都没选");
}else{
//a数量大于0
for(var i=0;i<$scope.arr.length;i++){
if($scope.arr[i].checked==true){
//遍历过程中,如果选中了就删除
$scope.arr.splice(i,1);
//必须写i--,因为可能删除了当前那一行以后,,下标超出去了
i--;
a--;
}
}
$scope.checkAll = false;
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<button ng-click="deletePerson()">删除选中项</button>
<br /><br />
<table border="1" cellpadding="10" cellspacing="0" width="500px">
<thead>
<th>
<input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>全选
</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tr ng-repeat="x in arr" align="center">
<td><input type="checkbox" ng-model="x.checked" ng-click="selectc($index)"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
</tr>
</table>
<div ng-repeat="x in arr">
<span>{{x.checked}}</span>
</div>
</center>
</body>
</html>