在学习angularjs的过程中，做了一个简易的购物车练手，碰到了以下两个问题
1.商品总价（$scope.TotalPrice）不起作用，在页面绑定了model，没有显示
2.删除()单个商品的时候，其他商品也会跟着删除
demo链接如下
http://jsbin.com/qometulete/edit?html,js,output
HTML代码如下
<!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>
JS代码如下
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 フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
まず実行結果を見てみましょう: http://jsbin.com/vajeru/3/edit?html,js,output
あなたの質問は次のとおりです:
削除方法が間違っています。1 つの
key ==indexを削除すると、$scope.datas内の後続の要素の配列インデックスが変更されます (1 ずつ減少します)。要素のインデックスは削除する必要があるインデックスと同じであるため、index以降のすべてのメンバーが削除され、spliceを使用して削除メソッドが書き換えられました。配列のメソッドkey == index删除一个之后，$scope.datas中其后的元素的数组索引会变化（减1），元素的索引又和需要删除的索引相同了，从而会删除index之后的所有的成员，删除方法已经重写，使用数组的splice方法getNum()getTotal()两个方法，需要在控制器初始化的时候，执行一次，由于没有初始运行，而且没有在初始化的时候定义TotalNum和TotalPrice，所以两个值是不会显示的。而且你是使用变量声明的方法定义的这两个函数，所以在定义它们之前调用会是undefinedgetTotal()中，你把price拼写错为pirce，从而$scope.TotalPrice会是NaN，你用number: 2过滤器，当然就显示不出来另外给你如下的建议：
值可以确定类型的时候，比较不要使用
==，尽量使用===变量一定要在函数的头部一次性初始化，比如，将数字初始化为 0
不要在循环之中调用可以在循环之外调用的方法，比如你在
reduceNum()addNum()里不停的调用getTotal()getNum()getTotal()初期操作がなく、初期化中に定義されないため、2 つのメソッドはコントローラーの初期化時に 1 回実行する必要があります。 code>TotalNum とTotalPriceなので、2 つの値は表示されません。そして、これら 2 つの関数は変数宣言メソッドを使用して定義されているため、定義する前にこれらを呼び出すと未定義になりますgetTotal()で、priceのスペルをpirceと間違えたため、$scope.TotalPriceはになります。 >NaN、number:2フィルターを使用すると、当然表示されません🎜🎜 🎜 🎜さらに、次の提案をします: 🎜 🎜 🎜🎜値によって型を決定できる場合は、==を使用せず、===を使用することをお勧めします🎜🎜 🎜🎜変数は関数の先頭で一度初期化する必要があります。たとえば、数値を0に初期化します🎜🎜 🎜🎜たとえば、reduceNum()addNum()getTotal(() を呼び出し続ける場合、ループ外で呼び出すことができるメソッドをループ内で呼び出さないでください。 /code> )🎜🎜 🎜🎜トラバース中、ループから飛び出せるときは、できるだけ早くループから飛び出すようにしてください🎜🎜 🎜両方の合計が対応する関数で宣言されている場合、誰もこれら 2 つの関数を呼び出さない場合、これら 2 つの合計はどのようにして存在するのでしょうか?あなたの書き方はとても角がありません。
1. プロダクトを削除するメソッドで、_remove メソッドが間違っています。
2. getNum getTotal メソッドで、len が定義されていません。問題もあります