全选批量删除

最新推荐文章于 2018-01-19 09:10:57 发布

彦4212

最新推荐文章于 2018-01-19 09:10:57 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40089806/article/details/78826846

这篇博客展示了如何使用AngularJS实现全选和批量删除的功能。通过定义一个名为'kongzhiqi'的控制器，创建了一个包含商品列表的数据模型，并实现了通过点击全选按钮可以改变所有商品的状态，以及当商品被选中时，点击批量删除按钮将删除选中的商品。代码中包含了数据模型、事件处理和过滤器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选、批量删除</title>

<script src="js/angular.min.js"></script>

<script>
angular.module("myapp", []).controller("kongzhiqi", function($scope) {

$scope.users = [
{state:false,name: "洋葱",price: 2,num: 2},
{state:false,name: "大葱",price: 4,num: 12},
{state:false,name: "胡萝卜",price: 1,num: 2},
{state:false,name: "牛肉",price: 50,num: 12},
{state:false,name: "胡萝卜1",price: 1,num: 2},
{state:false,name: "牛肉1",price: 50,num: 12}
];

$scope.del=function(){
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state){
$scope.users.splice(i,1);
i--; //让下个值从删除的索引开始
}
}
}
//全选的操作
$scope.ckAll=function(){
for(var i in $scope.users){
$scope.users[i].state=$scope.ckall;
}
}
})
</script>

</head>
<body ng-app="myapp" ng-controller="kongzhiqi">

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

<table border="1px" width="500px">
<tr>
<th>
<input type="checkbox" ng-model="ckall" ng-click="ckAll()" /> 全选/全不选
</th>
<th>商品名称 </th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
<tr ng-repeat="u in users|filter:{name:selname,num:selnum}|orderBy: ord:isjia">

<td><input type="checkbox" ng-model="u.state" /> </td>
<td>{{u.name}}</td>
<td>{{u.price}}</td>
<td>{{u.num}}</td>
</tr>
</table>

</body>
</html>

全选 批量删除

全选批量删除