使用Angular.js实现简单的购物车功能

2019-11-19 18:54:04

字体：大中小

来源：转载

供稿：网友

先给大家分享实现代码，在代码下面有效果图展示，大家可以两者结合参考下，废话不多说了，具体代码如下所示：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="http://code.angularjs.org/1.2.5/angular.min.js"></script><style type="text/css">td,th{width: 150px;text-align: left;}table{width: 800px;}.num{width: 70px;text-align: center;}tr td:last-child button {background-color: red;}#foot button{background-color: red;}</style></head><!--ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定{{}} 与 ng-bind 的区别是后者在加载时用户不会看到渲染之前的东西,前者可能会看到,所以首页一般用后者加载数据--><body ng-app="myApp"><div ng-controller="VC1"><table border="" cellspacing="" cellpadding=""><tr><th>产品编号</th><th>产品名称</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr><tr ng-repeat="x in Product" ><td>{{x.id}}</td><td>{{x.name}}</td><td><button ng-click="reduce($index)">-</button><input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" /><button ng-click="add($index)">+</button> </td><td >{{x.price}}</td><td>{{x.price * x.quantity}}</td><td><button ng-click="remove($index)">移除</button></td></tr></table><div id="foot"><span>总价:</span><span ng-bind="totalQuantity()"></span><span>购买数量</span><span >{{numAll()}}</span> <button ng-click="removeAll()">清空购物车</button> </div></div></body><script type="text/javascript">var app = angular.module("myApp",[]);app.controller("VC1",function($scope){$scope.Product = [{id: 1000,name: "iPhone8",quantity: 1,price: 8888}, {id: 1001,name: "iPhone9",quantity: 1,price: 9888}, {id: 1002,name: "iPhone 2s",quantity: 1,price: 3888}, {id: 1003,name: "iPhone 7P+",quantity: 1,price: 10088}];//减少数量$scope.reduce = function(index){if( $scope.Product[index].quantity > 1){$scope.Product[index].quantity--;}else{$scope.remove(index);}}//添加数量函数$scope.add = function(index){$scope.Product[index].quantity++;}//所有商品总价函数$scope.totalQuantity = function(){var allprice = 0for(var i = 0 ; i <$scope.Product.length;i++ ){allprice += $scope.Product[i].quantity * $scope.Product[i].price;}return allprice;}//购买总数量函数$scope.numAll = function(){var numAlls = 0for(var i = 0 ; i <$scope.Product.length;i++ ){numAlls += $scope.Product[i].quantity;}return numAlls;}//删除当前商品$scope.remove = function(index){if(confirm("确定要清空数据吗")){$scope.Product.splice(index,1)}}//清空购物车$scope.removeAll = function(){if(confirm("你确定套清空购物车所有商品吗?")){$scope.Product = [];}}//解决输入框输入负数时变为1$scope.change = function(index){if ( $scope.Product[index].quantity >= 1) {}else{$scope.Product[index].quantity = 1;}}$scope.$watch('Product',function(oldvalue,newvalue){console.log(oldvalue);console.log(newvalue);})})</script></html>

效果图展示如下：