angularJS 購物車練習
阿新 • • 發佈：2019-02-18
本文是一個簡單的購物車練習，功能包括增加、減少某商品的數量，從而影響該商品的購買總價以及所有商品的購買總價；從購物車內移除一項商品；清空購物車。
頁面效果如圖：
若使用js或jquery來實現這個頁面，會需要繫結很多事件，如減少數量按鈕事件，增加數量按鈕事件，移除某項商品事件，清空購物車事件，而這些事件之中很多程式碼很重複，比如計算某項商品的總購買價，計算所有商品的購買總價，不勝其煩，現在有了angularJs，則簡單許多，因為資料模型雙向繫結等原因。
上圖頁面的程式碼：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>angular購物車練習</title> <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css"> <script src="../../vendor/angular/angular.min.js"></script> <script src="app/index2.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div class="container"> <table class="table" ng-show="cartList.length > 0"> <thead> <tr> <th>產品編號</th> <th>產品名稱</th> <th>購買數量</th> <th>產品單價</th> <th>產品總價</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="item in cartList"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td> <button ng-click="reduceOne(item.id)" class="btn btn-primary">-</button> <input type="text" ng-model="item.quantity"> <button ng-click="addOne(item.id)" class="btn btn-primary">+</button> </td> <td>{{item.price}}</td> <td>{{item.quantity * item.price}}</td> <td><button ng-click="remove(item.id)" class="btn btn-danger">移除</button></td> </tr> <tr> <td>總購買價</td> <td>{{totalCost()}}</td> <td>總購買數量</td> <td>{{totalCount()}}</td> <td colspan="3"><button ng-click="cartList=[]" class="btn btn-danger">清空購物車</button></td> </tr> </tbody> </table> <h4 ng-show="cartList.length < 1">您的購物車暫無商品</h4> </div> </body> </html>
index2.js :
頁面中的指令：var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.cartList=[ {id:1000,name:"iphone5s",quantity:3,price:4300}, {id:1001,name:"iphone5",quantity:30,price:3300}, {id:1002,name:"imac",quantity:3,price:3000}, {id:1003,name:"ipad",quantity:5,price:6900} ]; var findIndex=function(id){ var index=-1; angular.forEach($scope.cartList,function(item,key){ if(item.id == id){ index=key; return; } });return index; }; //從cartList陣列中刪除一項產品 $scope.remove=function(id){ var index=findIndex(id); if(index != -1){ $scope.cartList.splice(index,1); } }; //為某個商品新增一個數量 $scope.addOne=function(id){ var index=findIndex(id); if(index != -1){ $scope.cartList[index].quantity ++; } }; //位某個商品減少一個數量 $scope.reduceOne=function(id){ var index=findIndex(id); if(index != -1){ var item=$scope.cartList[index]; if(item.quantity > 1){ item.quantity --; }else{ var returnKey=confirm("刪除該商品？"); if(returnKey){ $scope.remove(item.id); } } } }; //總購買價 $scope.totalCost=function(){ var total=0; angular.forEach($scope.cartList,function(item,key){ total += item.quantity * item.price; });return total; }; //總購買數量 $scope.totalCount=function(){ var count=0; angular.forEach($scope.cartList,function(item,key){ count += item.quantity; });return count; }; //監聽輸入框更改事件避免輸入負數或字串 $scope.$watch('cartList',function(newValue,oldValue){ console.log( "$scope.cartList === newValue "+ ($scope.cartList === newValue) ); //永遠為ture newValue指向cartList console.log( "$scope.cartList === oldValue "+ ($scope.cartList === oldValue) ); //頁面初始化後為true 一旦改動永遠為false angular.forEach(newValue,function(item,key){ if( isNaN(item.quantity) ){ item.quantity=oldValue[key].quantity; } else if( item.quantity <= 0 ){ var returnKey=confirm("刪除該商品？"); if(returnKey){ $scope.remove(item.id); }else{ item.quantity=oldValue[key].quantity; } } }); },true); });
ng-app 指定一個應用程式
ng-controller 指定一個控制器
ng-show 值表示式為 true 時，顯示本Dom
ng-repeat 重複本Dom
ng-click 指定一個單擊事件