批量删除

最新推荐文章于 2024-08-04 10:23:28 发布

原创最新推荐文章于 2024-08-04 10:23:28 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的全选和批量删除功能的示例代码。该示例展示了如何通过AngularJS控制器来操作数据数组，并利用ng-repeat指令进行数据绑定，实现了表格中商品信息的选择与删除功能。

摘要生成于 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("democ", function($scope) {

$scope.ord="price";
$scope.isjia=false;

$scope.aa = [ {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.save = function() {
$scope.aa.push({
name: "iPhone8x",
price: 8800
});
}*/

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

<input type="button" value="批量删除" ng-click="del()" />
<table border="1px" width="500px">
<tr>
<th><input type="checkbox" ng-model="ckall" ng-click="ckAll()" /> 全选/全不选 </th>
<th><span ng-click="ord='name' "> 商品名称 </span></th>
<th><span ng-click="ord='price' "> 商品价格</span></th>
<th><span ng-click="ord='num' ">商品数量</span></th>
</tr>
<tr ng-repeat="a in aa|filter:{name:selname,num:selnum}|orderBy: ord:isjia">

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

</body>
</html>