Angularjs implémente la fonction d'ajout du calcul du montant du panier-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-12 10:35:23

original

1852 Les gens l'ont consulté

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>

Copier après la connexion

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!