Jetons un coup d'œil aux rendus en premier:
Panier
1. Code
Si vous souhaitez savoir comment faire cela après avoir lu cet effet, continuez à lire. Pas grand-chose, téléchargez simplement le code.
Code html:
<! Doctype html> <html lang = "en" ng-app = "CART"> <A-head> <meta charset = "utf-8"> <itle> cart de magasin href = "../ scripts / angular-1.4.0-rc.2 / docs / composants / bootstrap-3.1.1 / css / bootstrap.min.css"> <lin <Pection> CART Implémentation AngularJS </Pection> <Tr> <Th> Numéro de série </th> <TH> Informations sur le produit </th> <Th> Prix unitaire (yuan) </th> Operation </ Th> </r> <tr> <tr ng-reateat = "items"> <td> {{$ index + 1}} </td> <td> <a href = "{{item.linkurl}}" Target = "_ Blank"> {{item.title}} </a> </td> <td> {{item.price | nombre: 2}} </td> <td> <bouton type = "Button" Ng-Click = "Aite ng-disabled = "item.quantity <= 1"> - </ button> <input type = "text" size = "5" ng-model = "item.quantity" ng-keydown = "QuantityKeyDown ()" ng-keyup = "quantityKeUp ()"> <bouton type = "bouton" ng-Click = "add.id.id)"> + + </ bouton> <Td> {{item.price * item.quantity | Number: 2}} </td> <td> <Button Type = "Button" ng-Click = "Delete (item.id)"> Delete </ Button> </td> </tr> </ table> <divi ng-show = "! <span> {{getQuantites ()}} </span> total: <span ng-show = "getTotalamount () <15000"> {{GetTotalAmount () | Number: 2}} </span> <span ng-show = "getTotalamount ()> = 15000"> {{getTotalamount () * Numéro | off) </span> <span> ({{getTotalAmount () | Number: 2}}) </span> </span> <Button type = "Button" ng-Click = "AlertSubmit ()"> Découvrez </utton> </div> <script src = "../ scripts / angular-1.4 src = "app.js"> </ script> </ body> </html>Code js:
/ Créé par WQQ le 2016/5/25. / var cartmodule = angular.module ('cart', []); cartmodule.controller ('cartctr', ['$ scope', function ($ scope) {$ scope.discount = 0.9; $ scope.items = [{id: 10001, titre: "Le fruit de l'auto-altitude: ingénieur complet", Prix: 40.80, 2, Fruit de la liaison: Prix: Prix: 40.80, 2, Fruit de la liaison: Ingénieur complet: " "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywjs&id=532166746631"}, {id: 10002, Titre: "MacBook pro 15 Inches", Prix: 16088. "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywjs&id=45771116847"}, {id: 10003, Titre: "Surface Book i5 128g Card graphique" 1, Linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.Cwywjs&id=525614504276"}, {id: 10004, titre: "Lenovo Yoga3pro i5 4g", 7299.00, quantité: 1, linkurl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywjs&id=41541519814"}]; Angular.ForEach ($ scope.items, fonction (item, index, array) {if (item.id === id) {item.quantity ++;}})}; $ scope.reduce = function (id) {angular.Forach ($ scope.items, item. // Ajouter un événement Keydown dans la boîte d'entrée pour éviter une entrée en entière non positive $ scope.quantityKeyDown = event) {event = event || (96 <= KEYCODE && KeyCODE <= 105) || KeyCode == 8) {// Key Arrow ↑ roy (événement) {Event = Event || $ scope.items.ForEach (fonction (item, index) {if (item.id == id) {if (confirm ("Confirmer pour supprimer cet élément de la panier?")) {$ scope.items.splice (index, 1);}}}})};); Angular.ForEach ($ scope.Items, fonction (INDEPT, array) {if (item.quantity) {quantités + = parseInt (Item.quantity);}); totalAmount + = item.quantity * item.price;});2. Analyse
Veuillez ignorer le style de bootstrap. Nous nous concentrons uniquement sur Angular. Le code est très simple. Analysons-le brièvement:
1. Préparer
Nous définissons d'abord un module cart , un contrôleur cartCtr et les introduisons dans le code HTML. Dans le même temps, nous définissons également un tableau items en JS pour simuler des choses dans le panier.
2. Ng-Repeat Iterator
Afin de traverser dynamiquement les données des items , nous utilisons l'instruction intégrée ng-repeat en Angular, qui peut facilement traverser le tableau et générer des éléments DOM . Ici, nous boucle pour générer 4 <tr> balises:
<tr ng-repeat = "item dans les éléments">
item est un objet dans le tableau items . Pensez-vous qu'il s'agit for/in en JS? ~ Si vous êtes un développeur .NET et que vous avez utilisé un rasoir ASP.NET MVC, vous connaissez le fonctionnement transparent des éléments DOM dans d'autres langues. Quant à savoir si Java et PHP ont une syntaxe similaire, je ne sais pas. Je suis un développeur .NET qui travaille dur.
itérateur Ng-Repeat
Nous pouvons voir $index est utilisé dans le premier TD, qui est dans ng-repeat , pas ce que nous définissons. Sa valeur est l'index de l' item actuel dans items , à partir de 0, nous utilisons donc $index+1 comme numéro de séquence, et d'autres (similaires à item . linkUrl ) liaison de données.
Nous avons utilisé {{xxx | numéro: 2}} dans les colonnes du prix et du montant unitaire. Il s'agit d'un filtre en angulaire. Sa fonction est de conserver la valeur précédente xxx deux décimales. Quant au montant, nous devons bien sûr être plus précis. Je viens de dire qu'il s'agit d'un filtre, donc il y a d'autres choses, comme currency . Vous pouvez ajouter un symbole $ devant XXX pour représenter les dollars américains, et vous pouvez utiliser vous-même d'autres filtres sur Baidu.
3. Ajouter des événements
Il y a des boutons numéro +, - et supprimer les boutons sur l'interface actuelle. Ces événements sont relativement simples. Utilisez ng-click pour ajouter des événements de clic à l'élément. En passant l'ID d'un certain produit, trouvez le produit et ajoutez, soustrayez et supprimez le produit. Cependant, une balise ng-disabled est ajoutée au bouton "-". Selon le nom, nous pouvons facilement penser à l'attribut disabled de HTML. Sa fonction est de désactiver DOM lorsque la valeur de ng-disabled est vraie. De même, ng-show utilisé ci-dessous est le même. Il s'affiche lorsqu'il est vrai, et caché lorsqu'il est faux. S'il s'agit d'un nombre, il se convertira automatiquement en valeur boolean . 0 est faux, non 0 est vrai. Notez que les nombres négatifs sont également vrais! . Ici, je laisserai le nombre de 1 ne pas être réduit, car si le nombre est plus petit, il peut être supprimé directement ~
Ajoutez ensuite l'événement ng-keydown à l'élément d'entrée afin qu'il puisse entrer uniquement les touches de flèche ↑ → ↓ ←, les touches numériques et backspace . Ensuite, j'ai essayé et atteint l'objectif, mais je pouvais entrer des numéros comme "00021", ce qui n'était évidemment pas satisfaisant. J'ai regardé le panier d'achat de Taobao et j'ai constaté que lorsque 0 est entré devant, le contenu de cette zone de texte actualisera automatiquement, en supprimant les 0 précédents, alors j'ai ajouté l'événement ng-keyup :
$ scope.quantityKeyUp = fonction (événement) {event = event || window.event; // Compatible avec IE8 ou ci-dessous, la cible est également var Target = event.target || event.srcelement; var keycode = event.KeyCode; if (48 === KeyCode || 96 === KeyCode) {Target.Value = paSeInt (Target.Value); }}; À l'heure actuelle, lorsque j'entre 0, la valeur de la zone de texte actualisera automatiquement. Pourquoi ne pas l'ajouter à keydown mais ajouter un autre événement? En effet, la valeur de target.value est toujours la valeur d'origine lorsque keydown est déclenché et que l'entrée de clé n'est pas incluse. Après keydown , la valeur est la nouvelle valeur. À l'heure actuelle, nous pouvons ensuite déclencher keyup pour atteindre notre objectif. Nous pouvons comparer l'effet du panier de Taobao. Je pense que mon expérience est meilleure que cela, car tant qu'elle n'est pas entrée à la fin, la zone de texte perdra toujours la concentration. . .
4. Statistiques
La quantité statistique consiste à lier directement la méthode et à traverser le tableau pour renvoyer la valeur.
Pour le montant total, j'ai fait une conception de 10% pour le montant total de 15 000. Utilisez ng-show pour masquer le montant total des informations réduites.
3. Résumé
Plusieurs réseaux de traversée forEach sont utilisés dans JS. La méthode native dans ecmascript5 est array.forEach(function(item,index,array){});
Angular est également encapsulé, angular.forEach(array,function(item,index,array){});
J'ai utilisé les deux méthodes dans le code, et je ne sais pas laquelle a de bonnes performances. .
À ce stade, le panier est terminé. En utilisant la liaison bidirectionnelle d'Angular, vous pouvez rapidement réaliser le changement de liaison de quantité et de quantité. J'espère que le contenu de cet article sera utile à l'apprentissage et à l'utilisation d'angulaires de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.