Schauen wir uns zuerst die Renderings an:
Einkaufswagen
1. Code
Wenn Sie wissen, wie Sie dies nach dem Lesen dieses Effekts tun möchten, lesen Sie weiter. Nicht viel, lade einfach den Code hoch.
HTML -Code:
<! DocType html> <html Lang = "en" ng-App = "cart"> <head> <meta charset = "utf-8"> <titels> Einkaufswagen </title> <link rel = "Stylesheet" href = "../ scripts/Angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min Implementation Cart</caption> <tr> <th>Serial number</th> <th>Product information</th> <th>Unit price (yuan)</th> <th>Quantity</th> <th>Amount (yuan)</th> <th>Operation</th> </tr> <tr ng-repeat=" item in items"> <td>{{$index + 1}}</td> <td> <a href = "{{item.linkurl}}" target = "_ leer"> {{item.title}} </a> </td> <td> {{{item.price | Nummer: 2} ng-disabled = "item.quantity <= 1">-</button> <Eingabe type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "mantityKeyDown ()" ng-keyup = "quantityKeyup ()"> <button type = "ng-click = add (add (it)"> "+ <td> {{item.price*item.quantity | Nummer: 2}} </td> <td> <button type = "button" ng-klick = "delete (it)"> löschen </button> </td> </tr> </table> <div ng-show = "items. <span>{{getQuantites()}} </span> Total: <span ng-show="getTotalAmount()<15000">{{getTotalAmount()|number:2}}</span> <span ng-show="getTotalAmount()>=15000"> {{getTotalAmount()*discount|number:2}}<span>(10% Aus) </span> <span> ({{GetTotAmount () | Nummer: 2}}) </span> </span> <button type = "button" ng-klick = "alertSubmit ()"> Checkout </button> </divular.js.js "src =". src = "app.js"> </script> </body> </html>JS -Code:
/Erstellt von WQQ am 2016/5/25. /var cartmodule = angular.module ('cart', []); cartmodule.controller ('cartctr', ['$ scope', function ($ scope) {$ scope.discount = 0,9; "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywjs&id=532166746631"}, {id: 10002, title: "macbook pro Retina:" MacBook pro Retina: "MacBook pro Retina:" MacBook pro Retina: "," MacBook pro Retina 15 Inchen ", 16088.00," MacBook pro Retina), "macbook pro Retina", "," MacBook pro Retina), "," MacBook pro Retina), "," MacBook pro Retina ",", "," MacBook pro Retina), "," MacBook pro Retina ",", "MACBOOD:", "RETINA:", "MACBOOD:" "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.Cwywjs&id=4571116847"}, {ID: 10003, Titel: "Surface Book i5 128G Indepent Independent Graphics Card", Price: "Title:" Surface Book i5 128G Independent Graphics Card: " 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, Menge: 1, Linkurl: "https://detail.tmall.com/item.htm?spm=A1Z0D.6639537.1997196601.37.cwywjs&id=415419814"}]; Angular.foreach ($ scope.items, function (item, index, array) {if (item.id === id) {item.quantity ++;}})}; // Keydown-Ereignis in der Eingabe-Box, um nicht-positive Innenversuche einzugeben. (96 <= KeyCode && KeyCode <= 105) || (Ereignis) {Ereignis || Fenster.Event; $ scope.Items.foreach (Funktion (Element, Index) {if (item.id == id) {if (bestätigen (Bestätigen Sie dieses Element, um diesen Element aus dem Einkaufswagen zu löschen? Angular.foreach ($ scope.items, item, index, array) {item.quantity) {Mengen += ParseInt (Element.quantity);}}}}; TotalAmount += Item.quantity * item.price;2. Analyse
Bitte ignorieren Sie den Stil der Bootstrap. Wir konzentrieren uns nur auf Angular. Der Code ist sehr einfach. Lassen Sie es uns kurz analysieren:
1. Bereiten Sie sich vor
Zuerst definieren wir ein cart -Modul, cartCtr -Controller, und stellen sie in den HTML -Code ein. Gleichzeitig definieren wir auch ein Array items in JS, um die Dinge im Einkaufswagen zu simulieren.
2. Iterator Ng-Repeat
Um die Daten in items dynamisch zu durchqueren, verwenden wir die integrierte Befehlsng ng-repeat in Angular, die das Array leicht durchqueren und DOM Elemente erzeugen kann. Hier schleifen wir 4 <tr> -Tags an:
<tr ng-repeat = "Artikel in Elementen">
item ist ein Objekt im items -Array. Haben Sie das Gefühl, dass dies for/in Schleife in js ist? ~ Wenn Sie ein .NET -Entwickler sind und ASP.NET MVC Rasiermesser verwendet haben, sind Sie mit nahtloser Funktionsweise von DOM -Elementen in anderen Sprachen vertraut. Ob Java und PHP eine ähnliche Syntax haben, weiß ich nicht. Ich bin ein hart arbeitender .NET-Entwickler.
NG-Repeat Iterator
Wir können sehen $index im ersten td verwendet wird, das sich in ng-repeat befindet, nicht in dem, was wir definieren. Sein Wert ist der Index des aktuellen item in items ab 0, sodass wir $index+1 als Sequenznummer und andere Datenbindung (ähnlich wie bei item . linkUrl ) verwenden.
Wir haben {{xxx | Nummer: 2}} in den Spalten der Einheitspreis und der Menge verwendet. Dies ist ein Filter in Winkel. Seine Funktion besteht darin, den vorherigen Wert xxx zwei Dezimalstellen zu halten. Was den Betrag betrifft, müssen wir natürlich genauer sein. Ich habe nur gesagt, dass dies ein Filter ist, also gibt es andere Dinge wie currency . Sie können ein $ -Symbol vor xxx hinzufügen, um US -Dollar zu repräsentieren, und Sie können andere Filter auf Baidu selbst verwenden.
3. Fügen Sie Ereignisse hinzu
Auf der aktuellen Schnittstelle befinden sich Nummer +, - Schaltflächen und Löschen von Schaltflächen. Diese Ereignisse sind relativ einfach. Verwenden Sie ng-click , um dem Element Klickereignisse hinzuzufügen. Finden Sie das Produkt, indem Sie die ID eines bestimmten Produkts übergeben und das Produkt hinzufügen, subtrahieren und löschen. Ein ng-disabled Tag wird jedoch der Schaltfläche "-" hinzugefügt. Nach dem Namen können wir uns leicht an das disabled Attribut von HTML vorstellen. Seine Funktion besteht darin, DOM Element zu deaktivieren, wenn der Wert von ng-disabled ist. In ähnlicher Weise ist ng-show gleich. Es wird angezeigt, wenn es wahr ist, und versteckt, wenn sie falsch sind. Wenn es sich um eine Zahl handelt, werden automatisch in einen boolean Wert konvertiert. 0 ist falsch, Nicht-0 ist wahr. Beachten Sie, dass negative Zahlen auch wahr sind! . Hier werde ich die Anzahl von 1 nicht reduzieren lassen, denn wenn die Zahl kleiner ist, kann sie direkt gelöscht werden ~
Fügen backspace dann das ng-keydown -Ereignis zum Eingabeelement hinzu, damit nur die Pfeiltasten eingeben können. Dann habe ich versucht und das Ziel erreicht, aber ich konnte Zahlen wie "00021" eingeben, was offensichtlich nicht zufriedenstellend war. Ich schaute mir den Einkaufswagen von Taobao an und stellte fest, dass der Inhalt dieses Textfelds automatisch aktualisiert wird und die vorherigen 0 entfernen. Daher habe ich das ng-keyup -Ereignis hinzugefügt:
$ scope.quantityKeyUp = function (event) {event = event || Fenster.Event; // kompatibel mit IE8 oder unten, Ziel ist auch var target = event.target || event.srcelement; var keyCode = event.KeyCode; if (48 === KeyCode || 96 === KeyCode) {target.value = parseInt (target.Value); }}; Zu diesem Zeitpunkt wird beim Eingeben von 0 der Textfeldwert automatisch aktualisiert. Warum fügen Sie es nicht zum keydown hinzu, fügen Sie aber ein anderes Ereignis hinzu? Dies liegt daran, dass der Wert des target.value Wert ist immer noch der ursprüngliche Wert, wenn keydown -Ereignis ausgelöst wird, und die Schlüsseleingabe ist nicht enthalten. Nach keydown ist der Wert der neue Wert. Zu diesem Zeitpunkt können wir dann keyup -Ereignis auslösen, um unser Ziel zu erreichen. Wir können den Effekt des Taobao -Einkaufswagens vergleichen. Ich denke, meine Erfahrung ist besser als sie, denn solange sie am Ende nicht eingegeben wird, wird das Textfeld immer den Fokus verlieren. . .
4. Statistik
Die statistische Menge besteht darin, die Methode direkt zu binden und das Array zu durchqueren, um den Wert zurückzugeben.
Für den Gesamtbetrag habe ich ein Entwurf gemacht, das 10% für den Gesamtbetrag von 15.000 entspricht. Verwenden Sie ng-show , um die Gesamtmenge an ermäßigten Informationen zu verbergen.
3. Zusammenfassung
Mehrere forEach Traversal -Arrays werden in JS verwendet. Die native Methode in ECMascript5 ist array.forEach(function(item,index,array){});
Angular ist ebenfalls eingekapselt, angular.forEach(array,function(item,index,array){});
Ich habe beide Methoden im Code verwendet und weiß nicht, welches eine gute Leistung hat. .
Zu diesem Zeitpunkt wurde der Einkaufswagen abgeschlossen. Mit der Zwei-Wege-Bindung von Angular können Sie schnell die Verknüpfungsänderung von Menge und Menge erreichen. Ich hoffe, der Inhalt dieses Artikels wird für das Lernen und die Verwendung von Angular aller hilfreich sein. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.