angularjs实现简单的购物车功能

时间：2021-05-28

本文实例为大家分享了angularjs实现购物车功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ 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; } </style> <script src="angular-1.5.5/angular.min.js"></script> <script> 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; } } } }; }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><div><input type="checkbox" ng-model="allCheck" ng-click="allChecked()">总金额：<span>{{ totalMoney() | currency:"￥"}}</span></div><div ng-repeat="item in cart" class="line"> <div><input type="checkbox" ng-model="item.checked" ng-click="shopChecked(item)"><span>{{item.shopName}}</span></div> <ul> <li ng-repeat="kind in item.goods"> <input type="checkbox" ng-model="kind.checked"><span>{{kind.goodsName}}</span> <p>{{kind.price}}</p> <p><span class="add" ng-click="add(kind)">+</span>{{kind.number}}<span class="reduce" ng-click="reduce(kind)">-</span></p> <p ng-click="delete(item,$index)">删除</p> </li> </ul></div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章