购物车——（批量删除，全选反选，修改值）_ts 购物车全选反选死值-优快云博客

本文链接：https://blog.youkuaiyun.com/Cf1035630950/article/details/78827222

本文介绍了一个基于AngularJS的购物车应用实例，实现了商品的全选、反选、批量删除等功能，并提供了商品信息的动态显示及排序操作。

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

<!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: 290,
name: "ipad",
price: 1420,
state: false
}, {
id: 500,
name: "ipad air",
price: 2340,
state: false
}, {
id: 910,
name: "imac",
price: 15400,
state: false
}, {
id: 1200,
name: "ipad mini",
price: 2200,
state: false
}

];

//全选，全不选
$scope.selectAll = false;
$scope.selectAllFun = 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.checkSelAll = function() {
var flag = false;
for(index in $scope.goods) {
if(!$scope.goods[index].state) {
flag = true;
}
}
if(flag) {
$scope.selectAll = false;

} else {
$scope.selectAll = true;
}
}
//批量删除
$scope.delSelect = function() {
var selArr = [];
for(index in $scope.goods) {
if($scope.goods[index].state) {
selArr.push($scope.goods[index].name)
}
}
if(selArr.length <= 0) {
alert("请先选择");
} else {
if(window.confirm("确定要删除吗？")) {
for(index1 in selArr) {
for(index2 in $scope.goods) {
if(selArr[index1] == $scope.goods[index2].name) {
$scope.goods.splice(index2, 1);
}
}
}
} else {

}
}
}
//点击删除删除哪一行
$scope.de = function(name) {
if(window.confirm("确定要删除" + name + "吗？")) {
for(index in $scope.goods) {
if(name == $scope.goods[index].name) {
$scope.goods.splice(index, 1);
}
}
}
}

//排序
//默认排序方式
$scope.sel = "排序方式";
if($scope.sel == "排序方式") {
$scope.sel = "";
}

//修改

$scope.de = function(price) {
var updatePrice = window.prompt("请修改你的值");
for(index in $scope.goods) {
if(price == $scope.goods[index].price) {
$scope.goods[index].price = updatePrice;
}
}
}

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
产品名称：<input type="text" placeholder="产品名称" ng-model="select" /> 排序：
<select ng-model="sel">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id倒叙</option>
<option value="price">价格正序</option>
<option value="-price">价格倒叙</option>
</select>
<button ng-click="delSelect()">批量删除</button>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in goods | filter:{name:select} | orderBy:sel">
<td><input type="checkbox" ng-model="g.state" ng-click="checkSelAll()" /></td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>
<button ng-click="de(g.name)">删除</button>
<button ng-click="de(g.price)">修改</button>
</td>
</tr>
</table>
</body>

</html>