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" >
<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">數(shù)量</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;
//點擊'+'增加數(shù)量
$scope.addNum = function($index) {
for(i=0;i<len;i++) {
if(i==$index) {
$scope.datas[i].count++;
getTotal();
}
}
};
//點擊"-"減少數(shù)量
$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();
});
}
//商品總數(shù)量
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;
}
}]);
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
中其后的元素的數(shù)組索引會變化(減1),元素的索引又和需要刪除的索引相同了,從而會刪除 index
之后的所有的成員,刪除方法已經(jīng)重寫,使用數(shù)組的 splice
method
getNum()
getTotal()
兩個方法,需要在控制器初始化的時候,執(zhí)行一次,由于沒有初始運行,而且沒有在初始化的時候定義 TotalNum
和 TotalPrice
,所以兩個值是不會顯示的。而且你是使用變量聲明的方法定義的這兩個函數(shù),所以在定義它們之前調(diào)用會是 undefined
getTotal()
中,你把 price
拼寫錯為 pirce
,從而 $scope.TotalPrice
會是 NaN
,你用 number: 2
Filter, of course it won’t be displayed
In 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()
里不停的調(diào)用 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.