全选全不选批量删除

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

<input type="button" value="批量删除" ng-click="piliang()" />

<input type="button" value="添加" ng-click="add()"/>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td><input type="checkbox" ng-click="quan()" /></td>
<td>名字</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in persons">
<td><input type="checkbox" name="cb" ng-click="danxuan($index)" /></td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td><input type="button" value="修改" ng-click="xiu()"/></td>
</tr>
</table>
<div ng-show="a">
<input type="button" value="OK" ng-click="ok()"/>
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {

var arr = [{
"name": "杨过",
"isChecked": false,
"age": 20
}, {
"name": "杨过12",
"isChecked": false,
"age": 20
}];
$scope.persons = arr;

//批量删除的时间
$scope.piliang = function() {
//遍历数组
for (var i = arr.length - 1; i >= 0; i--) {
var p = arr[i];
if (p.isChecked) {
arr.splice(i, 1);
}
}

}
//全选、反选
var flag = true;
$scope.quan = function() {
//传统
var cbs = $("input[name=cb]");
//遍历
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = flag;
//数据也要变
arr[i].isChecked = flag;
}
//置反
flag = !flag;
}
//单个复选框
$scope.danxuan = function($index) {
arr[$index].isChecked = !arr[$index].isChecked;
}
var flag2 = true;
//添加
$scope.add = function(){
$scope.a = true;
flag2=true;
}
//修改
$scope.xiu = function(){
$scope.a = true;
flag2=false;
}
//ok
$scope.ok = function(){
if(flag2){
console.log("添加---")
}else{
console.log("修改---")
}
$scope.a = false;
}
})
</script>
</body>

</html>

全选全不选批量删除

猜你喜欢