在学习angularjs的过程中,做了一个简易的购物车练手,碰到了以下两个问题
1.商品总价($scope.TotalPrice)不起作用,在页面绑定了model,没有显示
2.删除()单个商品的时候,其他商品也会跟着删除
demo链接如下
http://jsbin.com/qometulete/edit?html,js,output
HTML代码如下
shop cart
# 商品 单价 数量 增加 减少 小计 {{data.id}} {{data.name}} {{data.price}} {{data.count}} {{data.add}} {{data.reduce}} {{data.count*data.price | currency}} 删除 {{TotalNum }} {{TotalPrice | number:2}}
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
先看可以运行的结果吧: 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()
遍历时,可以跳出循环的时候,尽量早点跳出循环
两个 total 都是在对应的函数里声明的,如果没人去调用那两个函数,这俩 total 怎么可能存在呢?你这样的写法太不 angular 了。
1.删除商品方法中 _remove方法不正确 自己改正如何在数组中删除指定索引数据
2. getNum getTotal 方法中len没有定义 也有问题