Maison > Article > interface Web > Angularjs implémente la fonction d'ajout du calcul du montant du panier

Angularjs implémente la fonction d'ajout du calcul du montant du panier

php中世界最好的语言original: 2018-05-12 10:35:231853parcourir

Cette fois, je vais vous apporter angularjs pour implémenter la fonction d'ajout du calcul du montant du panier. Quelles sont les précautions qu'angularjs met en œuvre pour implémenter la fonction d'ajout du calcul du montant du panier. . Voici des cas pratiques. Levez-vous et jetez un œil.

Ce sera très gênant lorsque nous utiliserons js ou jquery pour calculer le montant du panier. Aujourd'hui, nous utilisons angulairejs, une nouvelle méthode pour calculer le montant total du panier. Le code est le suivant :

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

Effet opérationnel :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Explication détaillée des cas d'utilisation de la fonction de rappel JS

Quelles sont les précautions à prendre dans le combat réel de React Navigation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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：Quels sont les moyens de modifier les paramètres d'URL dans React-Router sans actualiser la page ?Article suivant：Quels sont les moyens de modifier les paramètres d'URL dans React-Router sans actualiser la page ?

Articles Liés

Voir plus