在学习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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
先看可以运行的结果吧: http://jsbin.com/vajeru/3/edit?html,js,output
你的问题如下:
你的删除方法有误,
key == index删除一个之后,$scope.datas中其后的元素的数组索引会变化(减1),元素的索引又和需要删除的索引相同了,从而会删除index之后的所有的成员,删除方法已经重写,使用数组的splice方法getNum()getTotal()两个方法,需要在控制器初始化的时候,执行一次,由于没有初始运行,而且没有在初始化的时候定义TotalNum和TotalPrice,所以两个值是不会显示的。而且你是使用变量声明的方法定义的这两个函数,所以在定义它们之前调用会是undefinedgetTotal()中,你把price拼写错为pirce,从而$scope.TotalPrice会是NaN,你用number: 2过滤器,当然就显示不出来另外给你如下的建议:
值可以确定类型的时候,比较不要使用
==,尽量使用===变量一定要在函数的头部一次性初始化,比如,将数字初始化为 0
不要在循环之中调用可以在循环之外调用的方法,比如你在
reduceNum()addNum()里不停的调用getTotal()遍历时,可以跳出循环的时候,尽量早点跳出循环
两个 total 都是在对应的函数里声明的,如果没人去调用那两个函数,这俩 total 怎么可能存在呢?你这样的写法太不 angular 了。
1.删除商品方法中 _remove方法不正确 自己改正如何在数组中删除指定索引数据
2. getNum getTotal 方法中len没有定义 也有问题