suchen

Heim  >  Artikel  >  Web-Frontend  >  Angular implementiert Plug-Ins, die den Gesamtbetrag hinzufügen, löschen und berechnen können

Angular implementiert Plug-Ins, die den Gesamtbetrag hinzufügen, löschen und berechnen können

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 14:40:261655Durchsuche

Dieses Mal bringen wir Ihnen das Angular-Plug-in, das den Gesamtbetrag hinzufügen, löschen und berechnen kann 🎜> Notizen Es gibt welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf. Das Beispiel in diesem Artikel beschreibt Angulars Implementierung einer Warenkorbfunktion, die gelöscht und der Gesamtbetrag berechnet werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! 

<!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('确定移除此项嘛？')){
          $scope.goods.splice(index,1);
        }
        if($scope.goods.length==0){
          alter('你的购物车为空');
        }
      };
    })
  </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>
Empfohlene Lektüre:


Das obige ist der detaillierte Inhalt vonAngular implementiert Plug-Ins, die den Gesamtbetrag hinzufügen, löschen und berechnen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php angular
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 Erläuterung der Verwendung der Routing-Middleware von node.js für Ge- und Post-AnfragenNächster Artikel：Detaillierte Erläuterung der Verwendung der Routing-Middleware von node.js für Ge- und Post-Anfragen

In Verbindung stehende Artikel

Mehr sehen