一、代碼
如果看了這個效果有興趣想知道怎麼做出來的話,那就繼續往下看吧。話不多少,直接上代碼。
html程式碼:
<!DOCTYPE html> <html ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href="../scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="main.css"> </head> <body ng-controller="cartCtr"> <table class="table table-hover" ng-show="items.length"> <caption>AngularJS实现购物车</caption> <tr> <th>序号</th> <th>商品信息</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>操作</th> </tr> <tr ng-repeat=" item in items"> <td>{{$index + 1}}</td> <td><a href="{{item.linkUrl}}" target="_blank" title="此链接将跳转到淘宝相关页面...">{{item.title}}</a></td> <td>{{item.price|number:2}}</td> <td> <button type="button" class="btn btn-default btn-xs" ng-click="reduce(item.id)" ng-disabled="item.quantity<=1">-</button> <input type="text" size="5" ng-model="item.quantity" ng-keydown="quantityKeydown()" ng-keyup="quantityKeyup()"> <button type="button" class="btn btn-default btn-xs" ng-click="add(item.id)">+</button> </td> <td class="bold mark">{{item.price*item.quantity|number:2}}</td> <td> <button type="button" class="btn btn-default btn-xs" ng-click="delete(item.id)">删除</button> </td> </tr> </table> <div ng-show="!items.length">购物车空空,快去寻找宝贝</div> <div> 已选商品:<span>{{getQuantites()}} </span> 合计: <span class=" mark" ng-show="getTotalAmount()<15000">{{getTotalAmount()|number:2}}</span> <span class=" mark" ng-show="getTotalAmount()>=15000"> {{getTotalAmount()*discount|number:2}}<span class="btn btn-xs">(9折)</span> <span>({{getTotalAmount()|number:2}})</span> </span> <button type="button" class="btn btn-primary btn-sm" ng-click="alertSubmit()">结 算</button> </div> <script src="../scripts/angular-1.4.0-rc.2/angular.js"></script><script src="app.js"></script> </body> </html>
js程式碼:
/ Created by wqq on 2016/5/25. / var cartModule = angular.module('cart', []); cartModule.controller('cartCtr', ['$scope', function ($scope) { $scope.discount = 0.9; $scope.items = [{id: 10001,title: "Web全栈工程师的自我修养 余果", price: 40.80,quantity: 2,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywJs&id=532166746631"}, {id: 10002,title: "MacBook Pro Retina 15英寸", price: 16088.00,quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywJs&id=45771116847"}, {id: 10003,title: "Surface Book I5 128G 独显",price: 11088.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywJs&id=525614504276"}, {id: 10004, title: "Lenovo Yoga3Pro I5 4G",price: 7299.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywJs&id=41541519814"} ]; $scope.add = function (id) { angular.forEach($scope.items, function (item, index, array) { if (item.id === id) {item.quantity++;} }) }; $scope.reduce = function (id) { angular.forEach($scope.items, function (item, index, array) { if (item.id === id) {item.quantity--; } }) }; //输入框添加keydown事件,避免输入非正整数 $scope.quantityKeydown = function (event) { event = event || window.event; var target=event.target||event.srcElement; var keycode = event.keyCode; if ((37 <= keycode && keycode <= 40)||(48 <= keycode && keycode <= 57) || (96 <= keycode && keycode <= 105) || keycode == 8) { //方向键↑→ ↓←、数字键、backspace } else { console.log(keycode); event.preventDefault(); return false; } }; //keyup事件,当输入数字为0时,重新刷新文本框内容 $scope.quantityKeyup = function (event) { event = event || window.event; var target=event.target||event.srcElement; var keycode = event.keyCode; if (48 === keycode || 96 === keycode ) { target.value=parseInt(target.value); }}; //删除商品 $scope.delete = function (id) { $scope.items.forEach(function (item, index) { if (item.id == id) { if (confirm("确定要从购物车中删除此商品?")) { $scope.items.splice(index, 1); return; } } }) }; //计算已选商品数量 $scope.getQuantites = function () { var quantities = 0; angular.forEach($scope.items, function (item, index, array) { if (item.quantity) { quantities += parseInt(item.quantity); } }); return quantities; }; //计算合计总金额 $scope.getTotalAmount = function () { var totalAmount = 0; angular.forEach($scope.items, function (item, index, array) { totalAmount += item.quantity * item.price; }); return totalAmount; }; $scope.alertSubmit = function () {alert("Angular实现购物车"); } }]);
二、分析
請忽略bootstrap的樣式,我們只關注Angular,程式碼很簡單,我們來簡單的分析:
1.首先我們我們定義了一個cart模組、cartCtr控制器,並將它們引入到了html程式碼中,同時我們也在js中定義了一個陣列items用於模擬購物車內的東西。
為了將items裡的資料動態的遍歷加載出來,我們使用Angular裡的內建指令ng-repeat,它可以非常方便的遍歷數組,生成DOM元素,在這裡循環產生了4個
<tr ng-repeat=" item in items">item就是items數組裡面的某一個對象,是不是感覺這就是js中的for/in循環~~如果你是一名.net開發人員,用過asp. net mvc的Razor就對這種其他語言無縫操作DOM元素很熟悉了,至於java、PHP是否有沒有類似的語法我就不清楚了,我是一名苦逼的.net開發。
ng-repeat迭代器
我們可以看到第一個td中用到了$index,這是ng-repeat內的,並不是我們定義的,它的值是當前item在items中的索引,從0開始,所以我們用$index+1作為序號,其他的還有(類似item.linkUrl)資料綁定。我們在單價和金額兩列用到了{{ xxx|number:2}},這是Angular中的一種過濾器,作用是將前面的值xxx保留兩位小數,金額嘛,我們當然要精確一些。剛才說了這是一種過濾器,那就還有其他的,像是currency,可以在xxx前面加上$符號表示美元,可以自行百度其他濾鏡用法。
目前介面上分別有數量+、-按鈕、刪除按鈕,這幾個事件都比較簡單,利用ng-click為元素添加點擊事件。透過傳遞某個商品的id,找到這個商品,對這個商品進行加、減、刪除操作,只不過在「-」按鈕上有添加了一個ng-disabled標籤,根據名字我們就可以很容易想到html的disabled屬性,它的作用就是當ng-disabled的值為true時DOM元素停用,同理,下面用到的ng-show也是一樣的,true時顯示,false時隱藏。如果是數字的話會自動轉換成boolean值,0是false,非0是true,注意負數也是true! 。這裡我讓當數量為1時就不能減少了,因為再少就可以直接刪除了呀~
然後在input元素添加ng-keydown事件,使其只能輸入方向鍵↑→ ↓←、數字鍵、backspace。然後我試了一下確實到達了目的,但是卻可以輸入類似「00021」這種數字,顯然這並不能令人滿意。我看了看淘寶的購物車,發現當在前面輸入0時,這個文字框的內容會自動刷新,去掉前面的0,於是我又添加了ng-keyup事件:
$scope.quantityKeyup = function (event) { event = event || window.event; //兼容IE8以下,target也是 var target=event.target||event.srcElement; var keycode = event.keyCode; if (48 === keycode || 96 === keycode ) { target.value=parseInt(target.value); }};這時當我輸入0時,文字框值就會自動刷新,為什麼不加到keydown裡面而要另外再加一個事件呢?那是因為觸發keydown事件時target.value的值還是原來的值,還沒有包含這次輸入的按鍵,而在keydown之後值就是新值了,這時候我們接著讓觸發keyup事件就可以達到目的了,可以對照看下淘寶購物車的效果,我覺得我的體驗比它的更好,因為它只要不是在最後輸入數字文字框總是會失去焦點。 。 。 4. 統計
統計數量就是直接綁定方法,遍歷陣列回傳值。
合計金額這塊,我做了個滿15000打9折的設計。利用ng-show隱藏顯示有打折資訊的合計金額。
js中用到了幾處forEach遍歷數組,ECMAScript5中原生的方法是array.forEach(function(item,index,array){});
.forEach(array,function(item,index,array){});
程式碼中我兩種方法都用到了,也不知道那種效能好。 。
至此,購物車就已經完成了,利用Angular的雙向綁定,可以快速的實現數量、金額的連動改變。希望這篇文章的內容對大家學習和使用Angular能有所幫助,如果有疑問可以留言交流。