angular和BootStrap3實現購物車功能

2019-11-19 17:47:22

字體：大中小

來源：轉載

供稿：網友

一、頁面搭建

1、html結構

采用BootStrap3來快速創建一個購物車表單樣式。
主要功能：
A：列表數據所示
B：增加刪除端口
C：清空購物車
D：商品數量的增減
E：動態計算商品價格以及總價

<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>購物車</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"> <script src="../vendor/angular.js"></script> <script src="car-controller.js"></script></head><body> <div class="table-responsive container" ng-controller="CarCtrl">  <table class="table " ng-show="data.length">   <thead>   <tr><th>產品編號</th><th>產品名字</th><th>購買數量</th><th>產品單價</th><th>產品總價</th><th>操作</th></tr>   </thead>   <tr ng-repeat="value in data">    <td>{{value.id}}</td>    <td>{{value.name}}</td>    <td>     <button class="btn btn-primary" ng-click="reduce(value.id)" >-</button>     <input type="number" name="num" ng-model="value.quantity" id="num">     <button class="btn btn-primary" ng-click="add(value.id)">+</button>    </td>    <td>{{value.price}}</td>    <td>{{value.price*value.quantity}}</td>    <td>     <button class="btn btn-danger" ng-click="removeItem(value.id)">移除</button>    </td>   </tr>   <tfoot>   <tr>    <td></td>    <td>總購買數量 </td>    <td>{{totalQuantity()}}</td>    <td>總購買價</td>    <td>{{totalPrice()}}</td>    <td>     <button class="btn btn-danger" ng-click="data=null">清空購物車</button>    </td>   </tr>   </tfoot>  </table>  <p ng-show="!data.length">您的購物車為空</p> </div></body></html>

2、js邏輯部分

1 注冊應用app
2 定義controller以即數據
3 在html中綁定應用以及controller，實現數據渲染

 var app=angular.module("app",[]); var carController=function($scope){  $scope.data=[   {    id:1,    name:'HuaWei',    quantity:'2',    price:4300   },   {    id:2,    name:'iphone7',    quantity:'3',    price:6300   },   {    id:3,    name:'XiaoMi',    quantity:'3',    price:2800   },   {    id:4,    name:'Oppo',    quantity:'3',    price:2100   },   {    id:5,    name:'Vivo',    quantity:'3',    price:2100   }  ] }

注意：

1、在html中通過ng-app注冊應用，ng-controller來綁定控制器作用域，ng-repeat遍歷商品數據data
2、在js中，angular提供了angular.forEach(obj,fn(item){})方法來遍歷angular的數據，并可以在fn中對數據做進一步處理。此處計算總價便通過此方法

二、業務邏輯

1、總價計算操作

/*   * 計算總價   * @method: angular.forEach()   * @param: 1. $scope.obj：要遍歷的scope上的數據   *   2. function(item){} 回調，在函數內部處理遍歷的數據   * */  $scope.totalPrice=function(){   var total=0;   angular.forEach($scope.data,function(item){    total+=item.quantity*item.price;   })   return total  }   /*計算總數量*/  $scope.totalQuantity=function(){   var total=0;   angular.forEach($scope.data,function(item){    total+=item.quantity;   })   return total  }

說明：

1）、使用angular提供的forEach方法遍歷當前數據，從而計算出所有數據的總價以及總數量

2、刪除條目

 /*移除某項  * @param：傳入當前項的id作為參數，以確定移除哪一項  * */  $scope.removeItem=function(id){   var index=findIndex();   $scope.data.splice(index,1);  }

說明：

1)、為代碼利用，所以抽取出來findIndex()方法用于確定當前操作的項，代碼如下：

/*查找當前操作的元素的位置*/  function findIndex(id){   var index=-1;   angular.forEach($scope.data,function(value,key,obj){    if(value.id===id){     index=key;     return index;    }   })   return index;  }

3.清空操作

在頁面中，直接利用表達式，但data=null完成數據的清空操作

<tr> <td></td> <td>總購買數量 </td> <td>{{totalQuantity()}}</td> <td>總購買價</td> <td>{{totalPrice()}}</td> <td>  <button class="btn btn-danger" ng-click="data=null">清空購物車</button> </td></tr>

4. 增加和刪除商品數量

/*增加商品數量*/  $scope.add=function(id){   var index=findIndex($scope,id),    item=$scope.data[index];   item.quantity++;  }  /*減少商品數量  * @description:  * 減少當前項的數量，當僅剩一件時彈出對話框確認是否清空。是則調用removeItem方法清除當前項  * */  $scope.reduce=function(id){   var index=findIndex($scope,id),    item=$scope.data[index];   if(item.quantity>1){ //判斷當前項是否還能再減    item.quantity--;   }else{    var makesure=confirm('確定要清空當前項嗎？？');    if(makesure){     $scope.removeItem(id)    }   }  }

總結：
此demo主要利用了angular的數據雙向綁定特性，從而大大的簡化了操作。
關鍵點：

1)、angular.forEach(obj,fn(value,key,obj)) 迭代器
2)、ng-click指令綁定點擊事件。使用ng-click會自動觸發angular的臟檢查機制從而實時的更新視圖
3)、ng-repeat指令遍歷數據，渲染頁面
4）、ng-show指令：通過其值來判斷是否顯示（原理是給元素加nghide類名）