Angular implementiert Plug-Ins, die den Gesamtbetrag hinzufügen, löschen und berechnen können-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-04-13 14:40:26

Original

1601 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!