When I was learning to use Angular to implement the shopping cart function, I encountered a problem:
When I deleted an item, the total price did not change. I struggled for a few days and couldn’t figure it out. Please help me. Thank you everyone
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8"/>
<title>To Do List</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
var model2 = [
{name:"shoes",id:1,price:22,total:2},
{name:"T－shirt",id:1,price:12,total:2},
{name:"dress",id:1,price:25,total:2},
]
var todoApp = angular.module("todoApp",[]);
todoApp.controller("ToDoCtrl",function($scope){
$scope.todo2 = model2;
$scope.init = function(){
$scope.allchecked();
}
$scope.checkedone= function(){
var totals = 0;
for(var i=0; i<$scope.todo2.length;i++){
if($scope.todo2[i].status == true){
$scope.allstatus = true
totals += $scope.todo2[i].price * $scope.todo2[i].total;
}else{
$scope.allstatus = false
}
}
$(".total").text(totals)
alert($scope.todo2.length)
}
$scope.allchecked= function(ev){
var totals = 0;
var selected = 0;
$scope.allstatus =true;
for(var i=0; i<$scope.todo2.length;i++){
if($scope.allstatus ==true){
$scope.todo2[i].status = true;
totals += $scope.todo2[i].price * $scope.todo2[i].total;
//selected +=
}else{
$scope.todo2[i].status = false;
}
}
$(".total").text(totals)
}
$scope.del= function(id){
alert( $scope.todo2.length)
$scope.todo2.splice(id,1)
}
})
</script>
<style>
table tr td{border:1px #ccc solid; padding:10px}
</style>
</head>
<body ng-controller="ToDoCtrl" ng-init="init()">
<table>
<tr>
<td> <input type="checkbox" ng-model="allstatus" ng-change="allchecked(allstatus)"/></td>
<td>name</td><td>price</td><td>total</td><td><span class="total"></span></td><td>del</td></tr>
<tr ng-repeat="z in todo2">
<td> <input type="checkbox" ng-model="z.status" ng-change="checkedone()"/></td>
<td>{{z.name}}</td>
<td>{{z.total}}</td>
<td>{{z.price}}</td>
<td>{{z.total * z.price}}</td>
<td><span ng-click="del(z.id)">delted</span></td>
</tr>
</table>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Add a function
and the del function is changed to
I have to complain that your current code doesn’t look like you’re writing in Angular at all, it’s still at the jQuery level. Reducing DOM operations is the original intention of Angularjs, but you directly use the .text() method to assign values. Why not just bind total to $scope and just {{total}} on html.
In addition, it is not advisable to place the array model2 directly outside to pollute the global variables. You can also put the initialization init code in the controller. There is no need to init in html.
Deleting elements in the array, there is no reason for the total price to change. Firstly, the total price is not bound to the scope. Furthermore, even if the total price variable is bound to the scope, it is also a primitive data type. After each operation, you need to To get the total price, you have to calculate it again.
Insert a piece of my code. There are many things that can be optimized, but I have to go for a run and don’t have time to change it. If you want to use it, pay attention to the path of importing js and css files
If you use jQuery directly to modify the VIEW layer or MODEL layer data, you need to manually synchronize the data.
You can use as needed:
or
To sync data. For details, please refer to AngularJS API