Heim > Artikel > Web-Frontend > Implementieren Sie die Warenkorbfunktion mit Angularjs und Bootstrap

Implementieren Sie die Warenkorbfunktion mit Angularjs und Bootstrap

高洛峰Original: 2017-02-04 13:35:111202Durchsuche

1. Code

Wenn Sie daran interessiert sind, diesen Effekt zu sehen und wissen möchten, wie man ihn herstellt, dann lesen Sie weiter. Es gibt nicht viel zu sagen, gehen Sie einfach direkt zum Code.

HTML-Code:

<!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-Code:

/ 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. Analyse

Bitte ignorieren Sie den Bootstrap-Stil, nur wir Konzentrieren Sie sich auf Angular. Der Code ist sehr einfach. Lassen Sie uns ihn kurz analysieren:

1. Vorbereitung

Zuerst definieren wir ein Cart-Modul und einen CartCtr-Controller und stellen sie im HTML vor Code haben wir auch ein Array-Elemente in js definiert, um den Inhalt des Warenkorbs zu simulieren.

2. ng-repeat-Iterator

Um die Daten in Elementen dynamisch zu laden, verwenden wir die integrierte Anweisung ng-repeat in Angular, was sehr praktisch ist Array und generieren DOM-Elemente. Hier werden 4

-Tags in einer Schleife generiert:

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

item ist ein Objekt im items-Array js? Loop~~ Wenn Sie ein .net-Entwickler sind und Razor von asp.net mvc verwendet haben, sind Sie mit der nahtlosen Funktionsweise von DOM-Elementen in anderen Sprachen vertraut. Ich weiß nicht, ob Java und PHP eine ähnliche Syntax haben. Ich weiß es nicht. Ja, ich bin ein fleißiger .net-Entwickler.

Implementieren Sie die Warenkorbfunktion mit Angularjs und Bootstrap

ng-repeat-Iterator

Wir können sehen, dass $index im ersten td verwendet wird, das innerhalb von ng-repeat liegt, nicht in dem, was wir definieren Sein Wert ist der Index des aktuellen Artikels in Artikeln, beginnend bei 0, daher verwenden wir $index+1 als Seriennummer und es gibt andere (ähnlich wie item.linkUrl) Datenbindungen.

Wir haben {{ xxx|number:2}} in den Spalten Stückpreis und Betrag verwendet. Seine Funktion besteht darin, den vorherigen Wert xxx auf zwei Dezimalstellen zu halten Bei der Menge müssen wir natürlich genauer sein. Ich habe gerade gesagt, dass dies eine Art Filter ist, aber es gibt auch andere, z. B. Währung. Sie können ein $-Zeichen vor xxx hinzufügen, um den US-Dollar darzustellen. Sie können Baidu verwenden, um selbst andere Filter zu verwenden.

3. Ereignisse hinzufügen

Auf der aktuellen Benutzeroberfläche gibt es Schaltflächen zum Hinzufügen von Mengen +, - und zum Löschen. Diese Ereignisse sind relativ einfach Elemente. Durch Übergeben der ID eines Produkts können wir das Produkt finden und das Produkt hinzufügen, entfernen und löschen. Basierend auf dem Namen können wir uns jedoch ein ng-disabled-Tag hinzufügen Die Funktion des Attributs „disabled“ besteht darin, das DOM-Element zu deaktivieren, wenn der Wert von „ng-disabled“ „true“ ist. Ebenso ist das unten verwendete ng-show dasselbe. Wenn es sich um eine Zahl handelt, wird sie automatisch in einen booleschen Wert umgewandelt. 0 ist falsch, ungleich 0 ist wahr, und beachten Sie, dass auch negative Zahlen wahr sind! . Hier mache ich es unmöglich, die Zahl zu reduzieren, wenn sie 1 ist, denn egal wie klein sie ist, sie kann direkt gelöscht werden~

Fügen Sie dann das ng-keydown-Ereignis zum Eingabeelement hinzu, damit Es können nur die Richtungstasten ↑ → ↓←, Zifferntasten und die Rücktaste eingegeben werden. Dann habe ich es versucht und das Ziel erreicht, aber ich konnte Zahlen wie „00021“ eingeben, was offensichtlich nicht zufriedenstellend war. Ich habe mir den Warenkorb von Taobao angesehen und festgestellt, dass der Inhalt dieses Textfelds automatisch aktualisiert wird, wenn 0 vorne eingegeben wird, und die 0 vorne entfernt wird. Deshalb habe ich das ng-keyup-Ereignis hinzugefügt:

$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);
 }};

Wenn ich 0 eingebe, wird der Textfeldwert automatisch aktualisiert. Warum füge ich ihn nicht zu Keydown hinzu, sondern füge ein anderes Ereignis hinzu? Das liegt daran, dass der Wert von target.value beim Auslösen des Keydown-Ereignisses immer noch der ursprüngliche Wert ist, der diesmal nicht die Tasteneingabe enthält. Nach dem Keydown ist der Wert der neue Wert Keyup-Ereignis, um das Ziel zu erreichen. Ich denke, meine Erfahrung ist besser, da das Textfeld immer den Fokus verliert, solange die Nummer nicht am Ende eingegeben wird. . .

4. Statistik

Die statistische Größe ist eine direkte Bindungsmethode, die das Array durchläuft und den Wert zurückgibt.

Für den Gesamtbetrag habe ich ein Design erstellt, das bei Einkäufen über 15.000 einen Rabatt von 10 % bietet. Verwenden Sie ng-show, um den Gesamtbetrag mit Rabattinformationen auszublenden und anzuzeigen.

3. Zusammenfassung

JS verwendet mehrere forEach zum Durchlaufen von Arrays. Die native Methode in ECMAScript5 ist array.forEach(function(item,index,array){}); >

Es ist auch in Angular gekapselt, angle.forEach(array,function(item,index,array){});

Ich verwende beide Methoden im Code, wenn es kommt, ich weiß nicht, welche Leistung gut ist. .

An diesem Punkt ist der Warenkorb fertig. Mithilfe der Zwei-Wege-Anbindung von Angular können Sie schnell verknüpfte Mengen- und Mengenänderungen realisieren. Ich hoffe, dass der Inhalt dieses Artikels allen beim Erlernen und Verwenden von Angular hilfreich ist. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation hinterlassen.

Weitere verwandte Artikel, in denen Angularjs und Bootstrap zur Implementierung der Warenkorbfunktion verwendet werden, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Schreiben Sie eine einfache Warenkorbfunktion in JavaScriptNächster Artikel：Schreiben Sie eine einfache Warenkorbfunktion in JavaScript

In Verbindung stehende Artikel

Mehr sehen