suchen

Heim >Web-Frontend >js-Tutorial >Angularjs implementiert die Funktion zum Hinzufügen der Berechnung des Warenkorbbetrags

Angularjs implementiert die Funktion zum Hinzufügen der Berechnung des Warenkorbbetrags

php中世界最好的语言
php中世界最好的语言Original
2018-05-12 10:35:231892Durchsuche

Dieses Mal bringe ich Ihnen angularjs, um die Funktion zum Hinzufügen der Warenkorbbetragsberechnung zu implementieren. Welche Vorsichtsmaßnahmen implementiert AngularJS, um die Funktion zum Hinzufügen der Warenkorbbetragsberechnung zu implementieren? . Das Folgende ist ein praktischer Fall.

Es wird sehr mühsam sein, wenn wir js oder jquery verwenden, um den Warenkorb-Betrag zu berechnen. Heute verwenden wir anglejs, um den Warenkorb-Gesamtbetrag mit einer neuen Methode zu berechnen. Der Code lautet wie folgt: 

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>angular购物金额计算器</title>
</head>
<body ng-controller="sum">
  价格:<input type="text" ng-model="cup.price">
  <br/><br/>
  数量:<input type="text" ng-model="cup.count">
  <p>运费:{{cup.fee|currency:"¥"}}</p>
  <p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></script>
<script>
  // 购物金额计算
  function sum($scope){
    $scope.cup={
      "price":12,
      "count":1,
      "fee":20
    }
    $scope.all=function(){
      return $scope.cup.price*$scope.cup.count;
    }
    // $watch
    // 监听变化
    // 有三个参数
    // 1.函数或属性
    // 2.callback
    // 3.true深度监听
    $scope.$watch("all()",function(nval, oval){
      //console.log(nval+":"+oval);
      if(nval<100){
        $scope.cup.fee=20;
      }
      else{
        $scope.cup.fee=0;
      }
    },true)
    $scope.$watch("cup.count",function(nval, oval){
      //console.log(nval+":"+oval);
      if(nval<1){
        $scope.cup.fee=0;
      }
    },true)
  }
</script>
<script>
</script>
</html>

Operationseffekt:

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 die chinesische PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Anwendungsfälle der JS-Rückruffunktion

Was sind die Vorsichtsmaßnahmen im tatsächlichen Kampf von React Navigation

Das obige ist der detaillierte Inhalt vonAngularjs implementiert die Funktion zum Hinzufügen der Berechnung des Warenkorbbetrags. 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：Welche Möglichkeiten gibt es, URL-Parameter in React-Router zu ändern, ohne die Seite zu aktualisieren?Nächster Artikel：Welche Möglichkeiten gibt es, URL-Parameter in React-Router zu ändern, ohne die Seite zu aktualisieren?

In Verbindung stehende Artikel

Mehr sehen