recherche

Maison >interface Web >js tutoriel >Implémenter la fonction de panier d'achat en utilisant Angularjs et bootstrap

Implémenter la fonction de panier d'achat en utilisant Angularjs et bootstrap

高洛峰
高洛峰original
2017-02-04 13:35:111254parcourir

1. Code

Si vous êtes intéressé à voir cet effet et que vous voulez savoir comment le réaliser, continuez à lire. Pas grand chose à dire, il suffit d'aller directement au code.

code 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>

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

Veuillez ignorer le style bootstrap, nous seulement Focus sur Angular, le code est très simple, analysons-le brièvement :

1 Préparation

Nous définissons d'abord un module cart et un contrôleur cartCtr, et les présentons dans le html. code, nous avons également défini un tableau d'éléments en js pour simuler le contenu du panier.

2. itérateur ng-repeat

Afin de charger dynamiquement les données dans les éléments, nous utilisons l'instruction intégrée ng-repeat dans Angular, qui peut être très pratique Traverse le tableau et générer des éléments DOM. Ici, quatre balises

sont générées dans une boucle : 
<tr ng-repeat=" item in items">

item est un objet dans le tableau items. dans in js ? Loop~~ Si vous êtes un développeur .net et avez utilisé Razor d'asp.net mvc, vous serez très familier avec le fonctionnement transparent des éléments DOM dans d'autres langages. Quant à savoir si Java et PHP ont une syntaxe similaire, Je ne sais pas. Oui, je suis un développeur .net assidu.

Implémenter la fonction de panier dachat en utilisant Angularjs et bootstrap

itérateur ng-repeat

Nous pouvons voir que $index est utilisé dans le premier td, qui est dans ng-repeat, pas ce que nous définissons est que sa valeur est l'index de l'élément actuel dans items, à partir de 0, nous utilisons donc $index 1 comme numéro de série, et il existe d'autres liaisons de données (similaires à item.linkUrl).

Nous avons utilisé {{ xxx|number:2}} dans les colonnes prix unitaire et montant. Il s'agit d'un filtre dans Angular. Sa fonction est de conserver la valeur précédente xxx à deux décimales. pour le montant, il faudra bien sûr être plus précis. Je viens de dire que c'est une sorte de filtre, mais il y en a d'autres, comme la devise. Vous pouvez ajouter un signe $ devant xxx pour représenter le dollar américain. Vous pouvez utiliser Baidu vous-même.

3. Ajouter des événements

Il existe des boutons de quantité, - et de suppression sur l'interface actuelle. Ces événements sont relativement simples. Utilisez ng-click pour ajouter des événements de clic aux éléments. . En passant l'ID d'un produit, nous pouvons trouver le produit et ajouter, soustraire et supprimer le produit. Cependant, une balise ng-disabled est ajoutée au bouton "-". En fonction du nom, nous pouvons facilement penser au HTML. . L'attribut désactivé, sa fonction est de désactiver l'élément DOM lorsque la valeur de ng-disabled est vraie. De même, le ng-show utilisé ci-dessous est le même. Il est affiché lorsqu'il est vrai et masqué lorsqu'il est faux. S'il s'agit d'un nombre, il sera automatiquement converti en valeur booléenne. 0 est faux, non-0 est vrai, et notez que les nombres négatifs sont également vrais ! . Ici, je rends impossible la réduction du nombre lorsqu'il est 1, car peu importe sa petite taille, il peut être supprimé directement~

Ajoutez ensuite l'événement ng-keydown à l'élément d'entrée pour que seules les touches de direction peuvent être saisies ↑ → ↓←, les touches numériques, le retour arrière. Ensuite, je l'ai essayé et j'ai atteint l'objectif, mais j'ai pu saisir des chiffres comme "00021", ce qui n'était évidemment pas satisfaisant. J'ai regardé le panier de Taobao et j'ai découvert que lorsque 0 était saisi devant, le contenu de cette zone de texte actualisait et supprimait automatiquement le 0 devant, j'ai donc ajouté l'événement 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);
 }};

Lorsque j'entre 0, la valeur de la zone de texte s'actualisera automatiquement. Pourquoi ne pas l'ajouter à keydown mais ajouter un autre événement ? En effet, lorsque l'événement keydown est déclenché, la valeur de target.value est toujours la valeur d'origine, qui n'inclut pas l'entrée key cette fois. Après keydown, la valeur est la nouvelle valeur. À ce moment, nous pouvons alors déclencher l'événement. événement keyup pour atteindre l'objectif. Vous pouvez comparer l'effet du panier Taobao. Je pense que mon expérience est meilleure que cela, car la zone de texte perdra toujours le focus tant que le numéro n'est pas saisi à la fin. . .

4. Statistiques

La quantité statistique est une méthode de liaison directe qui parcourt le tableau et renvoie la valeur.

Pour le montant total, j'ai réalisé un design qui offre une remise de 10 % pour les achats supérieurs à 15 000. Utilisez ng-show pour masquer et afficher le montant total avec les informations de réduction.

3. Résumé

JS utilise plusieurs forEach pour parcourir les tableaux. La méthode native dans ECMAScript5 est array.forEach(function(item,index,array){}); >

Il est également encapsulé dans angulaire, angulaire.forEach(array,function(item,index,array){});


J'utilise les deux méthodes dans le code Quand il arrive, je ne sais pas quelle performance est bonne. .


À ce stade, le panier est terminé. Grâce à la liaison bidirectionnelle d'Angular, vous pouvez rapidement réaliser des modifications liées en quantité et en montant. J'espère que le contenu de cet article sera utile à tout le monde dans l'apprentissage et l'utilisation d'Angular. Si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour plus d'articles sur l'utilisation d'Angularjs et de bootstrap pour implémenter la fonction de panier d'achat, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Écrivez une fonction de panier d'achat simple en JavaScriptArticle suivant：Écrivez une fonction de panier d'achat simple en JavaScript

Articles Liés

Voir plus