您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)angular和BootStrap3如何實(shí)現(xiàn)購(gòu)物車(chē)功能,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
一、頁(yè)面搭建
1、html結(jié)構(gòu)
采用BootStrap3來(lái)快速創(chuàng)建一個(gè)購(gòu)物車(chē)表單樣式。
主要功能:
A:列表數(shù)據(jù)所示
B:增加刪除端口
C:清空購(gòu)物車(chē)
D:商品數(shù)量的增減
E:動(dòng)態(tài)計(jì)算商品價(jià)格以及總價(jià)
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>購(gòu)物車(chē)</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>產(chǎn)品編號(hào)</th><th>產(chǎn)品名字</th><th>購(gòu)買(mǎi)數(shù)量</th><th>產(chǎn)品單價(jià)</th><th>產(chǎn)品總價(jià)</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>總購(gòu)買(mǎi)數(shù)量 </td> <td>{{totalQuantity()}}</td> <td>總購(gòu)買(mǎi)價(jià)</td> <td>{{totalPrice()}}</td> <td> <button class="btn btn-danger" ng-click="data=null">清空購(gòu)物車(chē)</button> </td> </tr> </tfoot> </table> <p ng-show="!data.length">您的購(gòu)物車(chē)為空</p> </div> </body> </html>
2、js邏輯部分
1 注冊(cè)應(yīng)用app
2 定義controller以即數(shù)據(jù)
3 在html中綁定應(yīng)用以及controller,實(shí)現(xiàn)數(shù)據(jù)渲染
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中通過(guò)ng-app注冊(cè)應(yīng)用,ng-controller來(lái)綁定控制器作用域,ng-repeat遍歷商品數(shù)據(jù)data
2、在js中,angular提供了angular.forEach(obj,fn(item){})方法來(lái)遍歷angular的數(shù)據(jù),并可以在fn中對(duì)數(shù)據(jù)做進(jìn)一步處理。此處計(jì)算總價(jià)便通過(guò)此方法
二、業(yè)務(wù)邏輯
1、總價(jià)計(jì)算操作
/* * 計(jì)算總價(jià) * @method: angular.forEach() * @param: 1. $scope.obj:要遍歷的scope上的數(shù)據(jù) * 2. function(item){} 回調(diào),在函數(shù)內(nèi)部處理遍歷的數(shù)據(jù) * */ $scope.totalPrice=function(){ var total=0; angular.forEach($scope.data,function(item){ total+=item.quantity*item.price; }) return total } /*計(jì)算總數(shù)量*/ $scope.totalQuantity=function(){ var total=0; angular.forEach($scope.data,function(item){ total+=item.quantity; }) return total }
說(shuō)明:
1)、使用angular提供的forEach方法遍歷當(dāng)前數(shù)據(jù),從而計(jì)算出所有數(shù)據(jù)的總價(jià)以及總數(shù)量
2、刪除條目
/*移除某項(xiàng) * @param:傳入當(dāng)前項(xiàng)的id作為參數(shù),以確定移除哪一項(xiàng) * */ $scope.removeItem=function(id){ var index=findIndex(); $scope.data.splice(index,1); }
說(shuō)明:
1)、為代碼利用,所以抽取出來(lái)findIndex()方法用于確定當(dāng)前操作的項(xiàng),代碼如下:
/*查找當(dāng)前操作的元素的位置*/ 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.清空操作
在頁(yè)面中,直接利用表達(dá)式,但data=null完成數(shù)據(jù)的清空操作
<tr> <td></td> <td>總購(gòu)買(mǎi)數(shù)量 </td> <td>{{totalQuantity()}}</td> <td>總購(gòu)買(mǎi)價(jià)</td> <td>{{totalPrice()}}</td> <td> <button class="btn btn-danger" ng-click="data=null">清空購(gòu)物車(chē)</button> </td> </tr>
4. 增加和刪除商品數(shù)量
/*增加商品數(shù)量*/ $scope.add=function(id){ var index=findIndex($scope,id), item=$scope.data[index]; item.quantity++; } /*減少商品數(shù)量 * @description: * 減少當(dāng)前項(xiàng)的數(shù)量,當(dāng)僅剩一件時(shí)彈出對(duì)話框確認(rèn)是否清空。是則調(diào)用removeItem方法清除當(dāng)前項(xiàng) * */ $scope.reduce=function(id){ var index=findIndex($scope,id), item=$scope.data[index]; if(item.quantity>1){ //判斷當(dāng)前項(xiàng)是否還能再減 item.quantity--; }else{ var makesure=confirm('確定要清空當(dāng)前項(xiàng)嗎??'); if(makesure){ $scope.removeItem(id) } } }
總結(jié):
此demo主要利用了angular的數(shù)據(jù)雙向綁定特性,從而大大的簡(jiǎn)化了操作。
關(guān)鍵點(diǎn):
1)、angular.forEach(obj,fn(value,key,obj)) 迭代器
2)、ng-click指令綁定點(diǎn)擊事件。使用ng-click會(huì)自動(dòng)觸發(fā)angular的臟檢查機(jī)制從而實(shí)時(shí)的更新視圖
3)、ng-repeat指令遍歷數(shù)據(jù),渲染頁(yè)面
4)、ng-show指令:通過(guò)其值來(lái)判斷是否顯示(原理是給元素加nghide類(lèi)名)
關(guān)于“angular和BootStrap3如何實(shí)現(xiàn)購(gòu)物車(chē)功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。