淘宝购物车前端(JS和Angularjs版本)
今天用HTML和JS實(shí)現(xiàn)以下購物車,然后再用Angualrjs再去實(shí)現(xiàn)一下購物車的前端實(shí)現(xiàn)。
功能頁面分析:
既然是做模仿淘寶購物車,肯定要先去分析一下淘寶的購物車頁面,自己去淘寶賣了兩件東西,看了下效果;
首先有一個全選功能,全選的時候會把所有的單選框給選中,并且會把所有的金額進(jìn)行統(tǒng)計。
商品店鋪的單選功能:在選擇店鋪的時候會把下面的商品全部都給選中,并且統(tǒng)計已經(jīng)勾選的金額。
商品單選功能:選擇該商品,并且統(tǒng)計金額,如果所有的商品都被勾選的話,會觸發(fā)上面的全面框也被勾選,并且統(tǒng)計所有已經(jīng)勾選的金額。
商品加減功能,對商品的金額進(jìn)行加減。
刪除功能,把該商品從購物車移出去。
結(jié)算功能:不做后臺交互,但是這里會控制結(jié)算按鈕的顯示,并且把統(tǒng)計的值給打印出來。
JS+HTML+CSS
CSS:
@charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;text-decoration:none;} table{border-collapse:collapse;border-spacing:0;border:0;} body{color:#666;font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-table} *html .clearfix{height:1%} .clearfix{display:block} *+html .clearfix{min-height:1%} .fl{float:left;} .fr{float:right;}.catbox{width:940px;margin:0 auto;} .catbox table{text-align:center;width:100%;} .catbox table th,.catbox table td{border:1px solid #CADEFF;} .catbox table th{background:#e2f2ff;border-top:3px solid #a7cbff;height:30px;} .catbox table td{padding:10px;color:#444;} .catbox table tbody tr:hover{background:RGB(238,246,255);} .checkbox{width:60px;} .goods{width:300px;} .goods span{width:180px;margin-top:20px;text-align:left;float:left;} .goods img{width:100px;height:80px;margin-right:10px;float:left;} .price{width:130px;} .count{width:90px;} .count .add, .count input, .count .reduce{float:left;margin-right:-1px;position:relative;z-index:0;} .count .add, .count .reduce{height:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;} .count .add:hover, .count .reduce:hover{color:#f50;z-index:3;border-color:#f60;cursor:pointer;} .count input{width:50px;height:15px;line-height:15px;border:1px solid #aaa;color:#343434;text-align:center;padding:4px 0;background-color:#fff;z-index:2;} .subtotal{width:150px;color:red;font-weight:bold;} .operation span:hover,a:hover{cursor:pointer;color:red;text-decoration:underline;}.foot{margin-top:10px;color:#666;height:48px;border:1px solid #c8c8c8;background-color:#eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position:relative;z-index:8;} .foot div, .foot a{line-height:48px;height:48px;} .foot .select-all{width:100px;height:48px;line-height:48px;padding-left:5px;color:#666;} .foot .closing{border-left:1px solid #c8c8c8;width:100px;text-align:center;color:#000;font-weight:bold;background:RGB(238,238,238);cursor:pointer;} .foot .total{margin:0 20px;cursor:pointer;} .foot #priceTotal, .foot #selectedTotal{color:red;font-family:"Microsoft Yahei";font-weight:bold;} .foot .selected{cursor:pointer;} .foot .selected .arrow{position:relative;top:-3px;margin-left:3px;} .foot .selected .down{position:relative;top:3px;display:none;} .show .selected .down{display:inline;} .show .selected .up{display:none;} .foot .selected:hover .arrow{color:red;} .foot .selected-view{width:935px;border:1px solid #c8c8c8;position:absolute;height:auto;background:#ffffff;z-index:9;bottom:48px;left:-1px;display:none;} .show .selected-view{display:block;} .foot .selected-view div{height:auto;} .foot .selected-view .arrow{font-size:16px;line-height:100%;color:#c8c8c8;position:absolute;right:330px;bottom:-9px;} .foot .selected-view .arrow span{color:#ffffff;position:absolute;left:0px;bottom:1px;}#selectedViewList{padding:10px 20px 10px 20px;} #selectedViewList div{display:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left;} #selectedViewList div img{width:100px;height:80px;margin-right:10px;float:left;} #selectedViewList div span{display:none;color:#ffffff;font-size:12px;position:absolute;top:0px;right:0px;width:60px;height:18px;line-height:18px;text-align:center;background:#000;cursor:pointer;} #selectedViewList div:hover span{display:block;}HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>購物車</title><link rel="stylesheet" href="css/style.css"/><script type="text/javascript" src="js/demo.js"></script></head> <body><div class="catbox"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/>?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/1.jpg" alt=""/><span>Casio/卡西歐 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>?全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計:¥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">◆<span>◆</span></span></div></div></div></body> </html> JS: window.onload = function () {if (!document.getElementsByClassName) {document.getElementsByClassName = function (cls) {var ret = [];var els = document.getElementsByTagName('*');for (var i = 0, len = els.length; i < len; i++) {if (els[i].className.indexOf(cls + ' ') >=0 || els[i].className.indexOf(' ' + cls + ' ') >=0 || els[i].className.indexOf(' ' + cls) >=0) {ret.push(els[i]);}}return ret;}}var table = document.getElementById('cartTable'); // 購物車表格var selectInputs = document.getElementsByClassName('check'); // 所有勾選框var checkAllInputs = document.getElementsByClassName('check-all') // 全選框var tr = table.children[1].rows; //行var selectedTotal = document.getElementById('selectedTotal'); //已選商品數(shù)目容器var priceTotal = document.getElementById('priceTotal'); //總計var deleteAll = document.getElementById('deleteAll'); // 刪除全部按鈕var selectedViewList = document.getElementById('selectedViewList'); //浮層已選商品列表容器var selected = document.getElementById('selected'); //已選商品var foot = document.getElementById('foot');// 更新總數(shù)和總價格,已選浮層function getTotal() {var seleted = 0;var price = 0;var HTMLstr = '';for (var i = 0, len = tr.length; i < len; i++) {if (tr[i].getElementsByTagName('input')[0].checked) {tr[i].className = 'on';seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);price += parseFloat(tr[i].cells[4].innerHTML);HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消選擇</span></div>'}else {tr[i].className = '';}}selectedTotal.innerHTML = seleted;priceTotal.innerHTML = price.toFixed(2);selectedViewList.innerHTML = HTMLstr;if (seleted == 0) {foot.className = 'foot';}}// 計算單行價格function getSubtotal(tr) {var cells = tr.cells;var price = cells[2]; //單價var subtotal = cells[4]; //小計tdvar countInput = tr.getElementsByTagName('input')[1]; //數(shù)目inputvar span = tr.getElementsByTagName('span')[1]; //-號//寫入HTMLsubtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);//如果數(shù)目只有一個,把-號去掉if (countInput.value == 1) {span.innerHTML = '';}else{span.innerHTML = '-';}}// 點(diǎn)擊選擇框for(var i = 0; i < selectInputs.length; i++ ){selectInputs[i].onclick = function () {if (this.className.indexOf('check-all') >= 0) { //如果是全選,則吧所有的選擇框選中for (var j = 0; j < selectInputs.length; j++) {selectInputs[j].checked = this.checked;}}if (!this.checked) { //只要有一個未勾選,則取消全選框的選中狀態(tài)for (var i = 0; i < checkAllInputs.length; i++) {checkAllInputs[i].checked = false;}}getTotal();//選完更新總計}}// 顯示已選商品彈層selected.onclick = function () {if (selectedTotal.innerHTML != 0) {foot.className = (foot.className == 'foot' ? 'foot show' : 'foot');}}//已選商品彈層中的取消選擇按鈕selectedViewList.onclick = function (e) {var e = e || window.event;var el = e.srcElement;if (el.className=='del') {var input = tr[el.getAttribute('index')].getElementsByTagName('input')[0]input.checked = false;input.onclick();}}//為每行元素添加事件for (var i = 0; i < tr.length; i++) {//將點(diǎn)擊事件綁定到tr元素tr[i].onclick = function (e) {var e = e || window.event;var el = e.target || e.srcElement; //通過事件對象的target屬性獲取觸發(fā)元素var cls = el.className; //觸發(fā)元素的classvar countInout = this.getElementsByTagName('input')[1]; // 數(shù)目inputvar value = parseInt(countInout.value); //數(shù)目//通過判斷觸發(fā)元素的class確定用戶點(diǎn)擊了哪個元素switch (cls) {case 'add': //點(diǎn)擊了加號countInout.value = value + 1;getSubtotal(this);break;case 'reduce': //點(diǎn)擊了減號if (value > 1) {countInout.value = value - 1;getSubtotal(this);}break;case 'delete': //點(diǎn)擊了刪除var conf = confirm('確定刪除此商品嗎?');if (conf) {this.parentNode.removeChild(this);}break;}getTotal();}// 給數(shù)目輸入框綁定keyup事件tr[i].getElementsByTagName('input')[1].onkeyup = function () {var val = parseInt(this.value);if (isNaN(val) || val <= 0) {val = 1;}if (this.value != val) {this.value = val;}getSubtotal(this.parentNode.parentNode); //更新小計getTotal(); //更新總數(shù)}}// 點(diǎn)擊全部刪除deleteAll.onclick = function () {if (selectedTotal.innerHTML != 0) {var con = confirm('確定刪除所選商品嗎?'); //彈出確認(rèn)框if (con) {for (var i = 0; i < tr.length; i++) {// 如果被選中,就刪除相應(yīng)的行if (tr[i].getElementsByTagName('input')[0].checked) {tr[i].parentNode.removeChild(tr[i]); // 刪除相應(yīng)節(jié)點(diǎn)i--; //回退下標(biāo)位置}}}} else {alert('請選擇商品!');}getTotal(); //更新總數(shù)}// 默認(rèn)全選checkAllInputs[0].checked = true;checkAllInputs[0].onclick(); }整個頁面的效果如下:
要看完整教程的可以自己去慕課網(wǎng)學(xué)習(xí),都比較簡單,這里就不說了;傳送門:點(diǎn)擊打開鏈接
說幾個不足的地方結(jié)算按鈕并沒有變化,而且把所有的單選框選擇完之后,全選框也應(yīng)該觸發(fā)選中才對,下面我加上Angualrjs重新去實(shí)現(xiàn)以下購物車。
AngularJS?Scope(作用域)
Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個對象,有可用的方法和屬性。
Scope 可應(yīng)用在視圖和控制器上。
Scope 概述
AngularJS 應(yīng)用組成如下:
- View(視圖), 即 HTML。
- Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)。
- Controller(控制器), 即 JavaScript 函數(shù),可以添加或修改屬性。
scope 是模型。
scope 是一個 JavaScript 對象,帶有屬性和方法,這些屬性和方法可以在視圖和控制器中使用。
首先創(chuàng)建我們的控制器: var app = angular.module('myApp', []);app.controller('myCart', function($scope) {});再和頁面綁定一下: <div class="catbox" ng-app="myApp" ng-controller="myCart">構(gòu)造表格: 前面的一個案例里面表格是靜態(tài)的,接下來我講會使用一個偽動態(tài)的表格去構(gòu)造頁面的數(shù)據(jù); 首先在Controller里面構(gòu)造我們的表格數(shù)據(jù); $scope.cartList=[{id:0,image:"images/1.jpg",name:"Casio/卡西歐 EX-TR350",price:5999.88,num:1,total:5999.88},{ id:1,image:"images/2.jpg",name:"Canon/佳能 PowerShot SX50 HS",price:3888.50,num:1,total:3888.50},{ id:2,image:"images/3.jpg",name:"Sony/索尼 DSC-WX300",price:1428.50,num:1,total:1428.50},{ id:3,image:"images/4.jpg",name:"Fujifilm/富士 instax mini 25",price:640.60,num:1,total:640.60}]然后使用ng-repeat 指令可以完美的顯示表格。 <table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" ng-model="all" />?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr ng-repeat="c in cartList"><td class="checkbox"><input class="check-one check" type="checkbox" ng-model="check"/></td><td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td><td class="price">{{c.price}}</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="{{c.num}}"/><span class="add">+</span></td><td class="subtotal">{{c.total}}</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table>關(guān)于小計和總計; 在我們的JS里面可能是很多的DOM操作,根據(jù)DOM來獲取值,然后再計算值,但是在我們的angularjs將會變得很優(yōu)雅,因?yàn)橐磺卸际歉鷶?shù)據(jù)有關(guān),讓我們不要去操作DOM只需要關(guān)心數(shù)據(jù)就好了。 使用$watch監(jiān)控數(shù)據(jù)模型的變化在scope 內(nèi)置的所有函數(shù)中,用得最多的可能就是$watch 函數(shù)了,當(dāng)你的數(shù)據(jù)模型中某一部分發(fā)生變化時,$watch 函數(shù)可以向你發(fā)出通知。你可以監(jiān)控單個對象的屬性,也可以監(jiān)控需要經(jīng)過計算的結(jié)果(函數(shù)),實(shí)際上只要能夠被當(dāng)作屬性訪問到,或者可以當(dāng)作一個javascript?函數(shù)被計算出來,就可以被$watch 函數(shù)監(jiān)控。它的函數(shù)簽名為
$watch(watchFn, watchAction, deepWatch)其中每個參數(shù)的詳細(xì)含義如下。
watchFn
該參數(shù)是一個帶有Angular 表達(dá)式或者函數(shù)的字符串,它會返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。這個表達(dá)式將會被執(zhí)行很多次,所以你要保證它不會產(chǎn)生其他副作用。也就是說,要保證它可以被調(diào)用很多次而不會改變狀態(tài)?;谕瑯拥脑?#xff0c;監(jiān)控表達(dá)式應(yīng)該很容易被計算出來。如果你使用字符串傳遞了一個Angular 表達(dá)式,那么它將會針對調(diào)用它的那個作用域中的對象而執(zhí)行。
watchAction
這是一個函數(shù)或者表達(dá)式,當(dāng)watchFn 發(fā)生變化時會被調(diào)用。如果是函數(shù)的形式,它將會接收到watchFn 的新舊兩個值,以及作用域?qū)ο蟮囊谩F浜瘮?shù)簽名為function(newValue, oldValue, scope)。
deepWatch
如果設(shè)置為true,這個可選的布爾型參數(shù)將會命令A(yù)ngular 去檢查被監(jiān)控對象的每個屬性是否發(fā)生了變化。如果你想要監(jiān)控數(shù)組中的元素,或者對象上的所有屬性,而不只是監(jiān)控一個簡單的值,你就可以使用這個參數(shù)。由于Angular 需要遍歷數(shù)組或者對象,如果集合比較大,那么運(yùn)算負(fù)擔(dān)就會比較重。
$watch 函數(shù)會返回一個函數(shù),當(dāng)你不再需要接收變更通知時,可以用這個返回的函數(shù)注銷監(jiān)控器。
$scope.sumTotal=0; //總計$scope.$watch('cartList',function(newValue,oldValue,scope){for(var i in newValue){var total=newValue[i].num*newValue[i].price; //計算出新的結(jié)果$scope.cartList[i].total=total.toFixed(3); //保留三位小數(shù)并且把它賦值給元數(shù)據(jù); $scope.sumTotal+=total;}},true);<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>購物車</title><link rel="stylesheet" href="css/style.css"/><script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/cart.js"></script> </head> <body><div class="catbox" ng-app="myApp" ng-controller="myCart"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" ng-model="all" />?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr ng-repeat="c in cartList"><td class="checkbox"><input class="check-one check" type="checkbox" ng-model="check"/></td><td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td><td class="price">{{c.price}}</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" ng-model="c.num"/><span class="add">+</span></td><td class="subtotal">{{c.total}}</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>?全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計:¥<span>{{sumTotal}}</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">aaaa<span>aaaa</span></span></div></div></div>全選,全不選 在Angularjs里面全選全不選只需要操作數(shù)據(jù)就好了,有不明白的可以看一下我原來寫的文章http://blog.csdn.net/liaodehong/article/details/50531873 所以我給我們的數(shù)據(jù)加了一個屬性; 完整的代碼如下: var app = angular.module('myApp', []);app.controller('myCart', function($scope) {$scope.cartList=[{id:0,image:"images/1.jpg",name:"Casio/卡西歐 EX-TR350",price:5999.88,num:1,total:5999.88,check:false},{ id:1,image:"images/2.jpg",name:"Canon/佳能 PowerShot SX50 HS",price:3888.50,num:1,total:3888.50,check:false},{ id:2,image:"images/3.jpg",name:"Sony/索尼 DSC-WX300",price:1428.50,num:1,total:1428.50,check:false},{ id:3,image:"images/4.jpg",name:"Fujifilm/富士 instax mini 25",price:640.60,num:1,total:640.60,check:false}]$scope.checkAll=function(){for(var i in $scope.cartList){$scope.cartList[i].check=$scope.all;}}$scope.deleteCart=function(id){for(var i in $scope.cartList){if($scope.cartList[i].id==id){$scope.cartList.splice(i,1);}}}$scope.$watch('cartList',function(newValue,oldValue,scope){$scope.sumTotal=0; //總計$scope.count=0; //計數(shù)器for(var i in newValue){var total=newValue[i].num*newValue[i].price; //計算出新的結(jié)果$scope.cartList[i].total=total.toFixed(3); //保留三位小數(shù)并且把它賦值給元數(shù)據(jù); if(newValue[i].check){$scope.sumTotal+=total;$scope.count++;}}$scope.all=($scope.count==newValue.length); //如果所有的都選中的話,那么全選也應(yīng)該選中 },true); });HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>購物車</title><link rel="stylesheet" href="css/style.css"/><script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/cart.js"></script> </head> <body><div class="catbox" ng-app="myApp" ng-controller="myCart"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" ng-click="checkAll()" ng-model="all"/>?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr ng-repeat="c in cartList"><td class="checkbox"><input class="check-one check" type="checkbox" ng-model="c.check" /></td><td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td><td class="price">{{c.price}}</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" ng-model="c.num"/><span class="add">+</span></td><td class="subtotal">{{c.total}}</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>?全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計:¥<span>{{sumTotal}}</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">aaaa<span>aaaa</span></span></div></div></div></body> </html>刪除: 刪除也很簡單,只需要刪除該數(shù)組就好了。 $scope.deleteCart=function(id){for(var i in $scope.cartList){if($scope.cartList[i].id==id){$scope.cartList.splice(i,1);}}}一個簡單的小DEMO基本上就改造完成了。 點(diǎn)擊打開鏈接
總結(jié)
以上是生活随笔為你收集整理的淘宝购物车前端(JS和Angularjs版本)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python django高校课程教学质
- 下一篇: layui模板引擎的使用