In the process of learning angularjs, I made a simple shopping cart practice and encountered the following two problems
1. The total price of the product ($scope.TotalPrice) does not work. The model is bound above and is not displayed
2. When deleting () a single product, other products will also be deleted accordingly
The demo link is as follows
http://jsbin.com/qometulete/edit?html,js,output
HTML code is as follows
<!doctype html>
<html lang="en" ng-app="shopCart">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>shop cart</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/lodash/3.5.0/lodash.js"></script>
<script src="src/scripts/shopcart.controller.js"></script>
</head>
<body ng-controller="shopCartCtrl">
<p class="container">
<p class="row">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">#</th>
<th class="col-md-2">商品</th>
<th class="col-md-2">单价</th>
<th class="col-md-2">数量</th>
<th class="col-md-2">增加</th>
<th class="col-md-2">减少</th>
<th class="col-md-2">小计</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<th scope="row">{{data.id}}</th>
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.count}}</td>
<td ng-click="addNum($index)">{{data.add}}</td>
<td ng-click="reduceNum($index)">{{data.reduce}}</td>
<td>{{data.count*data.price | currency}}</td>
<th class="col-md-2" ng-click="delProduct($index,$event)">删除</th>
</tr>
</tbody>
<tfoot>
<tr>
<td>{{TotalNum }}</td>
<td>{{TotalPrice | number:2}}</td>
</tr>
</tfoot>
</table>
</p>
</p>
</body>
</html>
The JS code is as follows
var myApp = angular.module('shopCart',[]);
myApp.controller('shopCartCtrl',['$scope', function($scope) {
//购物车信息
$scope.datas = [
{id:'1',name:'蜂蜜',price: 50,count: 1,add: '+', reduce: '-'},
{id:'2',name:'黄豆酱',price: 77.5,count: 1,add: '+', reduce: '-'},
{id:'3',name:'牛奶',price: 60,count: 1,add: '+', reduce: '-'}
];
var len = $scope.datas.length;
//点击'+'增加数量
$scope.addNum = function($index) {
for(i=0;i<len;i++) {
if(i==$index) {
$scope.datas[i].count++;
getTotal();
}
}
};
//点击"-"减少数量
$scope.reduceNum = function($index) {
for(i=0;i<len;i++) {
if(i==$index && $scope.datas[i].count!=0) {
$scope.datas[i].count--;
getTotal();
}
}
};
//删除商品
$scope.delProduct = function(index,event) {
_.remove($scope.datas,function(valule,key) {
return key == index;
//console.log(index);
event.preventDefault();
});
}
//商品总数量
var getNum = function() {
$scope.TotalNum = 0;
for(i=0;i<len;i++) {
$scope.TotalNum = $scope.TotalNum + $scope.datas[i].count;
}
return $scope.TotalNum;
}
//商品的总价
var getTotal = function() {
$scope.TotalPrice = 0;
for(i=0;i<len;i++) {
$scope.TotalPrice = $scope.TotalPrice + $scope.datas[i].pirce * $scope.datas[i].count;
}
return $scope.TotalPrice;
}
}]);
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let’s take a look at the running results first: http://jsbin.com/vajeru/3/edit?html,js,output
Your question is as follows:
Your deletion method is wrong,
key == index删除一个之后，$scope.datas中其后的元素的数组索引会变化（减1），元素的索引又和需要删除的索引相同了，从而会删除index之后的所有的成员，删除方法已经重写，使用数组的splicemethodgetNum()getTotal()两个方法，需要在控制器初始化的时候，执行一次，由于没有初始运行，而且没有在初始化的时候定义TotalNum和TotalPrice，所以两个值是不会显示的。而且你是使用变量声明的方法定义的这两个函数，所以在定义它们之前调用会是undefinedgetTotal()中，你把price拼写错为pirce，从而$scope.TotalPrice会是NaN，你用number: 2Filter, of course it won’t be displayedIn addition, I give you the following suggestions:
When the value can determine the type, it is better not to use
==，尽量使用===Variables must be initialized once at the head of the function, for example, initialize the number to 0
Don’t call methods in a loop that can be called outside the loop, such as when you
reduceNum()addNum()里不停的调用getTotal()When traversing, when you can jump out of the loop, try to jump out of the loop as early as possible
Both totals are declared in corresponding functions. If no one calls those two functions, how can these two totals exist? Your way of writing is so un-angular.
1. In the method of deleting the product, the _remove method is incorrect. Correct yourself how to delete the specified index data in the array.
2. In the getNum and getTotal method, len is not defined. There are also problems.