使用Angular.js實(shí)現(xiàn)簡單的購物車功能

2019-11-19 18:54:04

字體：大中小

供稿：網(wǎng)友

先給大家分享實(shí)現(xiàn)代碼，在代碼下面有效果圖展示，大家可以兩者結(jié)合參考下，廢話不多說了，具體代碼如下所示：

<!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 的區(qū)別是后者在加載時用戶不會看到渲染之前的東西,前者可能會看到,所以首頁一般用后者加載數(shù)據(jù)--><body ng-app="myApp"><div ng-controller="VC1"><table border="" cellspacing="" cellpadding=""><tr><th>產(chǎn)品編號</th><th>產(chǎn)品名稱</th><th>購買數(shù)量</th><th>產(chǎn)品單價</th><th>產(chǎn)品總價</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>購買數(shù)量</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}];//減少數(shù)量$scope.reduce = function(index){if( $scope.Product[index].quantity > 1){$scope.Product[index].quantity--;}else{$scope.remove(index);}}//添加數(shù)量函數(shù)$scope.add = function(index){$scope.Product[index].quantity++;}//所有商品總價函數(shù)$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;}//購買總數(shù)量函數(shù)$scope.numAll = function(){var numAlls = 0for(var i = 0 ; i <$scope.Product.length;i++ ){numAlls += $scope.Product[i].quantity;}return numAlls;}//刪除當(dāng)前商品$scope.remove = function(index){if(confirm("確定要清空數(shù)據(jù)嗎")){$scope.Product.splice(index,1)}}//清空購物車$scope.removeAll = function(){if(confirm("你確定套清空購物車所有商品嗎?")){$scope.Product = [];}}//解決輸入框輸入負(fù)數(shù)時變?yōu)?$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>

效果圖展示如下：