在学习用angular做购物车功能时，遇到一个问题：
我在删除一条商品时，总价没有跟着变动，折腾了几天，实在琢磨不出，请大家帮忙看看，谢谢大家了
<!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>
漂亮男人2017-05-15 17:07:28
Add a function
function totalPrize(){
var total=0;
angular.forEach($scope.todo2,function(item,index){
total+=item.price*item.total;
})
$('.total').text(total);
}and the del function is changed to
$scope.del = function(id) {
// alert($scope.todo2.length)
$scope.todo2.splice(id,1)
totalPrize();
}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.
<!doctype html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8" />
<title>To Do List</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
table tr td {
border: 1px #ccc solid;
padding: 10px
}
</style>
</head>
<body ng-controller="ToDoCtrl">
<table>
<tr>
<td> <input type="checkbox" ng-model="allstatus" ng-change="allchecked()" /></td>
<td>name</td>
<td>price</td>
<td>total</td>
<td>{{total}}</td>
<td>del</td>
</tr>
<tr ng-repeat="z in todo2">
<td> <input type="checkbox" ng-model="z.status" ng-change="checkedone($event)" /></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>
<script src="angular.min.js"></script>
<script src="../jquery.js"></script>
<script>
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
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
}];
$scope.todo2 = model2;
$scope.total=0;
function init() {
$scope.allstatus=true;
angular.forEach($scope.todo2,function(item){
item.status=true;
$scope.total+=item.price*item.total
})
}
init();
$scope.checkedone = function() {
totalPrize();
$scope.allstatus=checkAll();
}
function checkAll(){
for(var i=0;i<$scope.todo2.length;i++){
if(!$scope.todo2[i].status){
return false;
}
}
return true;
}
$scope.allchecked=function(){
if($scope.allstatus){
for(var i=0;i<$scope.todo2.length;i++){
$scope.todo2[i].status=true;
}
}else{
for(var i=0;i<$scope.todo2.length;i++){
$scope.todo2[i].status=false;
}
}
totalPrize()
}
$scope.del = function(id) {
$scope.todo2.splice(id,1)
totalPrize();
}
function totalPrize(){
$scope.total=0;
angular.forEach($scope.todo2,function(item,index){
if(item.status){
$scope.total+=item.price*item.total;
}
})
}
})
</script>
</body>
</html>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
phpcn_u15822017-05-15 17:07:28
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:
$scope.$digest()
or
$scope.$apply(function(){
//do sth here.
})
To sync data. For details, please refer to AngularJS API