前端 - angular购物车 商品总价与删除功能无效
滿天的星座
滿天的星座 2017-05-15 16:56:36
0
3
671

在学习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
滿天的星座
滿天的星座

全部回复 (3)
洪涛

先看可以运行的结果吧: http://jsbin.com/vajeru/3/edit?html,js,output

你的问题如下:

  • 你的删除方法有误,key == index删除一个之后,$scope.datas中其后的元素的数组索引会变化(减1),元素的索引又和需要删除的索引相同了,从而会删除index之后的所有的成员,删除方法已经重写,使用数组的splice方法

  • getNum()getTotal()两个方法,需要在控制器初始化的时候,执行一次,由于没有初始运行,而且没有在初始化的时候定义TotalNumTotalPrice,所以两个值是不会显示的。而且你是使用变量声明的方法定义的这两个函数,所以在定义它们之前调用会是undefined

  • getTotal()中,你把price拼写错为pirce,从而$scope.TotalPrice会是NaN,你用number: 2过滤器,当然就显示不出来

另外给你如下的建议:

  • 值可以确定类型的时候,比较不要使用==,尽量使用===

  • 变量一定要在函数的头部一次性初始化,比如,将数字初始化为 0

  • 不要在循环之中调用可以在循环之外调用的方法,比如你在reduceNum()addNum()里不停的调用getTotal()

  • 遍历时,可以跳出循环的时候,尽量早点跳出循环

    某草草

    两个 total 都是在对应的函数里声明的,如果没人去调用那两个函数,这俩 total 怎么可能存在呢?你这样的写法太不 angular 了。

      漂亮男人

      1.删除商品方法中 _remove方法不正确 自己改正如何在数组中删除指定索引数据
      2. getNum getTotal 方法中len没有定义 也有问题

        最新下载
        更多>
        网站特效
        网站源码
        网站素材
        前端模板
        关于我们 免责声明 Sitemap
        PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!