這篇文章將為大家詳細講解有關angular和BootStrap3如何實現購物車功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、頁面搭建
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類名）
關于“angular和BootStrap3如何實現購物車功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
