Heim > Artikel > Web-Frontend > So implementieren Sie grundlegende Warenkorbfunktionen mit Angular

So implementieren Sie grundlegende Warenkorbfunktionen mit Angular

亚连Original: 2018-06-15 14:44:301698Durchsuche

In diesem Artikel wird hauptsächlich Angular vorgestellt, um die Warenkorbfunktion zu implementieren, die den Gesamtbetrag löschen und berechnen kann. Dazu gehören AngularJS-Ereignisreaktionen, Elementdurchläufe und numerische Operationen sowie andere verwandte Betriebsfähigkeiten >Dieser Artikel Das Beispiel beschreibt, wie Angular die Warenkorbfunktion implementiert, die den Gesamtbetrag löschen und berechnen kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schauen Sie sich zuerst den Laufeffekt an:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net angular可删除与计算总额的购物车</title>
  <script src="angular.min.js"></script>
  <style>
    table{
      width: 500px;
      height: 300px;
      border-collapse: collapse;
      text-align: center;
    }
    td{
      border: 1px solid black;
    }
  </style>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      $scope.goods=[{
        gname:"iphone8",
        num:"3",
        price:"999"
      },{
        gname: "iphone7",
        num: "4",
        price: "599"
      },{
        gname: "iphone6",
        num: "5",
        price: "499"
      },{
        gname: "iphone5",
        num: "6",
        price: "399"
      }
      ];
      $scope.allSum=function () {
        var allPrice=0;
        for(var i=0;i<$scope.goods.length;i++){
          allPrice+=$scope.goods[i].price*$scope.goods[i].num;
        }
        return allPrice;
      };
      $scope.remove=function (index) {
        if(confirm(&#39;确定移除此项嘛？&#39;)){
          $scope.goods.splice(index,1);
        }
        if($scope.goods.length==0){
          alter(&#39;你的购物车为空&#39;);
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
  <tr>
    <td colspan="5">你的购物车</td>
    <tr>
  <td>商品名称</td>
  <td>数量</td>
  <td>单价</td>
  <td>小计</td>
  <td>操作</td>
  </tr>
  <tr ng-repeat="arr in goods">
    <td>{{arr.gname}}</td>
    <td>{{arr.num}}</td>
    <td>{{arr.price|currency:"RMB￥"}}</td>
    <td>{{arr.num*arr.price|currency:"RMB￥"}}</td>
    <td><button ng-click="remove($index)">删除</button></td>
  </tr>
  <tr>
    <td colspan="5">总金额<span ng-bind="allSum()|currency:&#39;RMB&#39;"></span></td>
  </tr>
</table>
</body>
</html>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über die vom Browser angehaltene Animation während des Ajax-Synchronisierungsvorgangs (ausführliches Tutorial)

So verwenden Sie JQuery zum Ändern eines Links indem Sie darauf klicken Hintergrundstil

So installieren und deinstallieren Sie Node.js unter Linux (ausführliches Tutorial)

Wie gibt Vue Original-HTML aus? ?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie grundlegende Warenkorbfunktionen mit Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Detaillierte Einführung in Routing und Middleware in node.jsNächster Artikel：Detaillierte Einführung in Routing und Middleware in node.js

In Verbindung stehende Artikel

Mehr sehen