利用Angularjs和bootstrap實現(xiàn)購物車功能

更新時間：2016年08月31日 11:36:26 作者：小弋呀

在學習了如何簡單開始一個Angular程序之后，跟著網(wǎng)上的教程我也來實現(xiàn)一個購物車功能，為了減少頁面樣式設(shè)計我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。

先來看看效果圖：

購物車

一、代碼

如果看了這個效果有興趣想知道怎么做出來的話，那就繼續(xù)往下看吧。話不多少，直接上代碼。

html代碼：

<!DOCTYPE html>
<html lang="en" 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實現(xiàn)購物車</caption>
 <tr>
 <th>序號</th>
 <th>商品信息</th>
 <th>單價（元）</th>
 <th>數(shù)量</th>
 <th>金額（元）</th>
 <th>操作</th>
 </tr>
 <tr ng-repeat=" item in items">
 <td>{{$index + 1}}</td>
 <td><a href="{{item.linkUrl}}" target="_blank" title="此鏈接將跳轉(zhuǎn)到淘寶相關(guān)頁面...">{{item.title}}</a></td>
 <td class="bold">{{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 class="empty" ng-show="!items.length">購物車空空，快去尋找寶貝</div>
<div class="total">
 已選商品：<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 class="discount">({{getTotalAmount()|number:2}})</span>
 </span>
 <button type="button" class="btn btn-primary btn-sm" ng-click="alertSubmit()">結(jié) 算</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全棧工程師的自我修養(yǎng) 余果", 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事件，避免輸入非正整數(shù)
 $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) {
    //方向鍵↑→ ↓←、數(shù)字鍵、backspace
  }
  else {
   console.log(keycode);
   event.preventDefault();
   return false;
  }
 };
//keyup事件，當輸入數(shù)字為0時，重新刷新文本框內(nèi)容
$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;
   }
  }
 })
 };
 //計算已選商品數(shù)量
 $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實現(xiàn)購物車"); }
}]);

二、分析

請忽略bootstrap的樣式，我們只關(guān)注Angular，代碼很簡單，我們來簡單的分析一下：

1. 準備

首先我們我們定義了一個cart模塊、cartCtr控制器，并將它們引入到了html代碼中，同時我們還在js中定義了一個數(shù)組items用于模擬購物車內(nèi)的東西。

2. ng-repeat迭代器

為了將items里的數(shù)據(jù)動態(tài)的遍歷加載出來，我們使用Angular里的內(nèi)置指令ng-repeat，它可以非常方便的遍歷數(shù)組，生成DOM元素，在這里循環(huán)生成了4個<tr>標簽：

　　<tr ng-repeat=" item in items">

item就是items數(shù)組里面的某一個對象，是不是感覺這就是js中的for/in循環(huán)~~如果你是一名.net開發(fā)人員，用過asp.net mvc的Razor就對這種其他語言無縫操作DOM元素很熟悉了，至于java、PHP是否有沒有類似的語法我就不清楚了，我是一名苦逼的.net開發(fā)。

ng-repeat迭代器

我們可以看到第一個td中用到了$index,這是ng-repeat內(nèi)的，并不是我們定義的，它的值是當前item在items中的索引，從0開始，所以我們用$index+1作為序號，其他的還有（類似item.linkUrl)數(shù)據(jù)綁定。

我們在單價和金額兩列用到了{{ xxx|number:2}}，這是Angular中的一種過濾器，作用是將前面的值xxx保留兩位小數(shù)，金額嘛，我們當然要精確一些。剛才說了這是一種過濾器，那就還有其他的，比如currency，可以在xxx前面添加一個$符號表示美元，可以自行百度其他過濾器用法。

3. 添加事件

當前界面上分別有數(shù)量+、-按鈕、刪除按鈕，這幾個事件都比較簡單，利用ng-click給元素添加點擊事件。通過傳遞某個商品的id，找到這個商品，對這個商品進行加、減、刪除操作，只不過在“-”按鈕上有添加了一個ng-disabled標簽，根據(jù)名字我們就可以很容易想到html的disabled屬性，它的作用就是當ng-disabled的值為true時DOM元素禁用，同理，下面用到的ng-show也是一樣的，true時顯示，false時隱藏。如果是數(shù)字的話會自動轉(zhuǎn)化為boolean值，0是false，非0是true，注意負數(shù)也是true！。這里我讓當數(shù)量為1時就不能減少了，因為再少就可以直接刪除了呀~

然后在input元素添加ng-keydown事件，使其只能輸入方向鍵↑→ ↓←、數(shù)字鍵、backspace。然后我試了下確實到達了目的，但是卻可以輸入類似“00021”這種數(shù)字，顯然這并不能令人滿意。我看了看淘寶的購物車，發(fā)現(xiàn)當在前面輸入0時，這個文本框的內(nèi)容會自動刷新，去掉前面的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里面而要另外再加一個事件呢？那是因為觸發(fā)keydown事件時target.value的值還是原來的值，還沒有包含本次輸入的按鍵，而在keydown之后值就是新值了，這時候我們接著讓觸發(fā)keyup事件就可以達到目的了，可以對照看下淘寶購物車的效果，我覺得我的體驗比它的更好，因為它只要不是在最后輸入數(shù)字文本框總是會失去焦點。。。

4. 統(tǒng)計

統(tǒng)計數(shù)量就是直接綁定方法，遍歷數(shù)組返回值。

合計金額這塊，我做了個滿15000打9折的設(shè)計。利用ng-show隱藏顯示帶打折信息的合計金額。

三、總結(jié)

js中用到了幾處forEach遍歷數(shù)組，ECMAScript5中原生的方法是array.forEach(function(item,index,array){});

angular中也封裝了，angular.forEach(array,function(item,index,array){});

代碼中我兩種方法都用到了，也不知道那種性能好。。

至此，購物車就已經(jīng)完成了，利用Angular的雙向綁定，可以快速的實現(xiàn)數(shù)量、金額的聯(lián)動改變。希望這篇文章的內(nèi)容對大家學習和使用Angular能有所幫助，如果有疑問可以留言交流。

您可能感興趣的文章: