<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular全选及批量删除</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<input type="button" value="批量删除" ng-click="deleteAll()" />
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td><input type="checkbox" ng-click="quanxuan()" /></td>
<td>球类</td>
</tr>
<tr ng-repeat="ball in balls">
<td><input type="checkbox" ng-click="xuanzhong($index)" name="cb"/></td>
<td>{{ball.bname}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.balls = [{
"bname": "篮球",
"flag": false
},{
"bname": "足球",
"flag": false
},{
"bname": "乒乓球",
"flag": false
}];
//选中
$scope.xuanzhong = function($index){
$scope.balls[$index].flag = !$scope.balls[$index].flag;
}
//批量删除
$scope.deleteAll = function() {
for (var i = $scope.balls.length-1 ; i >= 0; i--) {
var ball = $scope.balls[i];
if(ball.flag){
$scope.balls.splice(i,1)
}
}
}
//全选
var f = true;
$scope.quanxuan = function(){
var cbs = $("input[name = cb]");
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = f;
$scope.balls[i].flag = f;
}
f = !f;
}
})
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular全选及批量删除</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<input type="button" value="批量删除" ng-click="deleteAll()" />
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td><input type="checkbox" ng-click="quanxuan()" /></td>
<td>球类</td>
</tr>
<tr ng-repeat="ball in balls">
<td><input type="checkbox" ng-click="xuanzhong($index)" name="cb"/></td>
<td>{{ball.bname}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.balls = [{
"bname": "篮球",
"flag": false
},{
"bname": "足球",
"flag": false
},{
"bname": "乒乓球",
"flag": false
}];
//选中
$scope.xuanzhong = function($index){
$scope.balls[$index].flag = !$scope.balls[$index].flag;
}
//批量删除
$scope.deleteAll = function() {
for (var i = $scope.balls.length-1 ; i >= 0; i--) {
var ball = $scope.balls[i];
if(ball.flag){
$scope.balls.splice(i,1)
}
}
}
//全选
var f = true;
$scope.quanxuan = function(){
var cbs = $("input[name = cb]");
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = f;
$scope.balls[i].flag = f;
}
f = !f;
}
})
</script>
</html>