您的位置：首页 > Web前端 > AngularJS

Angular全选及批量删除

2017-12-07 16:38 531 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航