问题描述
在学习angularjs的过程中，做了一个简易的购物车练手，碰到了以下两个问题1.商品总价（$scope.TotalPrice）不起作用，在页面绑定了model，没有显示2.删除()单个商品的时候，其他商品也会跟着删除demo链接如下http://jsbin.com/qometulete/edit?html,js,outputHTML代码如下
<!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='https://www.6hehe.com/wenda/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 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; }}]);
问题解答
回答1：先看可以运行的结果吧： http://jsbin.com/vajeru/3/edit?html,js,output
你的问题如下：
你的删除方法有误，key == index 删除一个之后，$scope.datas 中其后的元素的数组索引会变化（减1），元素的索引又和需要删除的索引相同了，从而会删除 index 之后的所有的成员，删除方法已经重写，使用数组的 splice 方法
getNum() getTotal() 两个方法，需要在控制器初始化的时候，执行一次，由于没有初始运行，而且没有在初始化的时候定义 TotalNum 和 TotalPrice ，所以两个值是不会显示的。而且你是使用变量声明的方法定义的这两个函数，所以在定义它们之前调用会是 undefined
getTotal() 中，你把 price 拼写错为 pirce，从而 $scope.TotalPrice 会是 NaN，你用 number: 2 过滤器，当然就显示不出来
另外给你如下的建议：
值可以确定类型的时候，比较不要使用 ==，尽量使用 ===
变量一定要在函数的头部一次性初始化，比如，将数字初始化为 0
不要在循环之中调用可以在循环之外调用的方法，比如你在 reduceNum() addNum() 里不停的调用 getTotal()
遍历时，可以跳出循环的时候，尽量早点跳出循环
回答2：两个 total 都是在对应的函数里声明的，如果没人去调用那两个函数，这俩 total 怎么可能存在呢？你这样的写法太不 angular 了。
回答3：1.删除商品方法中 _remove方法不正确 自己改正如何在数组中删除指定索引数据2. getNum getTotal 方法中len没有定义 也有问题
