Angularjsとブートストラップを使用してショッピングカート機能を実装する-jsチュートリアル-php.cn

Angularjsとブートストラップを使用してショッピングカート機能を実装する

高洛峰

リリース： 2017-02-04 13:35:11

オリジナル

1198 人が閲覧しました

1. コード

このエフェクトに興味があり、その作成方法を知りたい場合は、以下を読み続けてください。多くのことは言う必要はありません。コードに直接進んでください。

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(&#39;cart&#39;, []);
cartModule.controller(&#39;cartCtr&#39;, [&#39;$scope&#39;, 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实现购物车"); }
}]);

ログイン後にコピー

2. 分析

ブートストラップスタイルは無視してください。Angular のみに焦点を当てます。コードは非常に単純です。簡単に分析してみましょう:

1 を準備します。
まず、カートモジュールとcartCtrコントローラーを定義し、それらをHTMLコードに導入しました。同時に、ショッピングカートの内容をシミュレートする配列itemsもjsで定義しました。

2. ng-repeat イテレータ

項目内のデータを動的にロードするために、Angular の組み込み命令 ng-repeat を使用します。これは、非常に便利に配列を走査し、DOM 要素を生成し、ここでループすることができます。タグが生成されました:

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

ログイン後にコピー

item は items 配列内のオブジェクトです。これは、js の for/in ループだと思いますか?~ あなたが .net 開発者で、.net の ASP Razor を使用したことがある場合。 mvc は他の言語での DOM 要素のシームレスな操作に精通しています。Java と PHP が同様の構文を持っているかどうかについては、私は勤勉な .net 開発者です。

Angularjsとブートストラップを使用してショッピングカート機能を実装する ng-repeat iterator

$index が最初の td 内で使用されていることがわかります。その値は items 内の現在の項目です。 0 なので、$index+1 をシリアル番号として使用します。また、他のデータバインディング (item.linkUrl と同様) もあります。

単価と金額の列で {{ xxx|number:2}} を使用しました。これは Angular のフィルターであり、金額に関しては、以前の値 xxx を小数点以下 2 桁に保つことです。正確であることが必要です。これは一種のフィルターであると述べましたが、通貨など、米ドルを表すために $ 記号を追加することもできます。Baidu では、他のフィルターを使用することもできます。

3. イベントを追加します

現在のインターフェースには数量 +、- ボタン、および削除ボタンがあります。これらのイベントは ng-click を使用して要素にクリックイベントを追加します。商品のIDを渡すことで商品を検索し、追加、削除、削除することができますが、名前からhtmlを想像するとng-disabledタグが追加されます。 .disabled 属性の機能は、ng-disabled の値が true の場合に DOM 要素を無効にすることです。同様に、以下で使用される ng-show は true の場合に表示され、false の場合に非表示になります。数値の場合、0 は false、0 以外は true、負の数値も true に自動的に変換されます。。ここでは、数値が1の場合は数値を減らすことができないようにします。数値がどんなに小さくても直接削除できるからです~

次に、ng-keydownイベントをinput要素に追加して、方向のみを入力できるようにします↑→ ↓← キーと数字キー、バックスペース。そこで試してみたところ、目標は達成できましたが、「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 イベントがトリガーされると、target.value の値がまだ元の値であり、keydown 後の値が新しい値になるためです。目標を達成するための keyup イベントは、最後に数字が入力されない限りテキストボックスが常にフォーカスを失うため、タオバオのショッピングカートの効果を比較することができます。。。

4. 統計

統計量は、配列を走査して値を返す直接結合メソッドです。

合計金額15,000以上のご購入で10％割引となるデザインを作成させて頂きました。 ng-show を使用して、合計金額と割引情報を非表示または表示します。

3. 概要

js は配列を走査するためにいくつかの forEach を使用します。ECMAScript5 のネイティブメソッドは array.forEach(function(item,index,array){});

これも angular、angular でカプセル化されます。 forEach(array,function(item,index,array){});

コード内で両方のメソッドを使用しましたが、どちらの方がパフォーマンスが良いかわかりません。。

この時点で、ショッピングカートが完成します。Angular の双方向バインディングを使用すると、数量と金額のリンクされた変更を迅速に実現できます。この記事の内容が Angular の学習と使用に役立つことを願っています。ご質問がある場合は、メッセージを残して連絡してください。

Angularjs とブートストラップを使用してショッピングカート機能を実装することに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。