前端 - angular购物车 商品总价与删除功能无效
滿天的星座
滿天的星座 2017-05-15 16:56:36
[AngularJS讨论组]

在学习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)
PHP中文网

先看可以运行的结果吧: 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没有定义 也有问题

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号