本文主要和大家大家分享angularjs实现简单的购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
nbsp;html>Title *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-style: none; } .add,.reduce{ display: inline-block; width: 20px; height: 20px; border: 1px solid #000; text-align: center; } .line{ border-bottom: 1px solid #000; } var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.cart=[ { "shopName":"趣艺工坊", "checked":false, "goods":[ { "goodsName":"纯手工制作木质时钟精致家具装饰摆件", "pic":"images/cart_01.jpg", "price":150.00, "number":1, "checked":false }, { "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件", "pic":"images/cart_02.jpg", "price":119.00, "number":2, "checked":true }, { "goodsName":"装饰木雕，独特趣味设计家具装饰摆件", "pic":"images/cart_03.jpg", "price":120.00, "number":0, "checked":false } ] }, { "shopName":"邻街纸艺", "checked":false, "goods":[ { "goodsName":"纯手工制作木质时钟精致家具装饰摆件", "pic":"images/cart_04.jpg", "price":89.00, "number":2, "checked":true }, { "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件", "pic":"images/cart_05.jpg", "price":189.00, "number":1, "checked":false } ] }, { "shopName":"纸来我往", "checked":true, "goods":[ { "goodsName":"纯手工制作木质时钟精致家具装饰摆件", "pic":"images/cart_06.jpg", "price":289.00, "number":3, "checked":true } ] } ]; //点击加减按钮，数量加减;点击删除按钮，删除商品 $scope.reduce=function(goods){ goods.number--; if (goods.number<=0) goods.number=0; $scope.totalMoney(); }; $scope.add=function(kind){ kind.number++; $scope.totalMoney(); }; $scope.delete=function(item,index){ item.goods.splice(index,1) }; /*总金额计算*/ $scope.totalMoney=function(){ var total=0; for(var i=0;i<$scope.cart.length;i++){ for(var j=0;j<$scope.cart[i].goods.length;j++){ if($scope.cart[i].goods[j].checked){ total+=$scope.cart[i].goods[j].price*$scope.cart[i].goods[j].number; } } } return total; }; /*商铺选择*/ $scope.shopChecked=function(item){ if(item.checked==true){ for(var i=0;i<item.goods.length;i++){ item.goods[i].checked=true } }else { for(var i=0;i<item.goods.length;i++){ item.goods[i].checked=false; } } }; /*全部选择*/ $scope.allChecked=function(){ if($scope.allCheck){ for(var i=0;i<$scope.cart.length;i++){ $scope.cart[i].checked=true; for(var j=0;j<$scope.cart[i].goods.length;j++){ $scope.cart[i].goods[j].checked=true; } } }else { for(var i=0;i<$scope.cart.length;i++){ $scope.cart[i].checked=false; for(var j=0;j<$scope.cart[i].goods.length;j++){ $scope.cart[i].goods[j].checked=false; } } } }; })总金额：{{ totalmoney() | currency:"￥"}}
{{item.shopName}}
登录后复制 {{kind.goodsName}}
{{kind.price}}
+{{kind.number}}-
删除
相关推荐：
JQuery实现购物车添加删除以及结算功能
jQuery模拟天猫购物车动画效果实例分享
用JavaScript实现简易的购物车实例分享
以上就是angularjs简单购物车功能实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787116.html
