批量删除

来源:互联网 发布:java date format 编辑:程序博客网 时间:2024/06/06 02:38
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.goods = [{
id: 80,
name: "iphone",
price: 5400,
state: false
}, {
id: 1200,
name: "ipad air",
price: 2200,
state: false
}, {
"id": 290,
"name": "ipad",
"price": 1420,
state: false
}, {
"id": 910,
"name": "imac",
"price": 15400,
state: false
}];
//全选 全不选
$scope.selectAll = false;
$scope.selAll = function() {
if($scope.selectAll) {
for(index in $scope.goods) {
$scope.goods[index].state = true;
}
} else {
for(index in $scope.goods) {
$scope.goods[index].state = false;
}
}
}
//反选
$scope.selCheck = function() {
var a = 0;
for(index in $scope.goods) {
if(!$scope.goods[index].state) {
$scope.selectAll = false;
} else {
a++;
}
if(a == $scope.goods.length) {
$scope.selectAll = true;
} else {
$scope.selectAll = false;
}
}
}
//批量删除
$scope.delSelect = function() {
var arr = [];
for(index in $scope.goods) {
if($scope.goods[index].state) {
arr.push($scope.goods[index].name);
}
}
if(arr.length <= 0) {
alert("请选择删除项");
} else {
for(index in arr) {
for(index2 in $scope.goods) {
if(arr[index] == $scope.goods[index2].name) {
$scope.goods.splice(index2, 1);
}
}
}
}
}



});
</script>
</head>


<body ng-app="myApp" ng-controller="myCtrl">
<center>
<button ng-click="delSelect()">批量删除</button>
<table border="1" cellpadding="10" cellspacing="0" width="50%">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selAll()"></th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="good in goods">
<td align="center"><input type="checkbox" ng-model="good.state" ng-click="selCheck()"></td>
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<a href="#" style="text-decoration: none; color: black;" ng-click="del(good.name)">删除</a>
</td>
</tr>
</tbody>


</table>
</center>
</body>


</html>

//全选
$scope.quan = function() {
if($scope.checkAll = true) {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].dd = true;
}
} else {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].dd = false;
}
}
};
//批量删除
$scope.delSelect = function() {
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].dd == true) {
$scope.data.splice(i, 1);
i--;
}
}
}

<th><input type="checkbox" ng-model="checkAll" ng-click="quan()" /></th>

<td align="center"><input type="checkbox" ng-model="item.dd" /></td>

<button ng-click="delSelect()">批量删除</button>