Maison > Article > interface Web > Implémentation d'Angularjs pour l'analyse du code de calcul du montant des achats

Implémentation d'Angularjs pour l'analyse du code de calcul du montant des achats

php中世界最好的语言original: 2018-05-23 11:37:541519parcourir

Cette fois, je vais vous présenter une analyse de code angularjs pour implémenter le calcul du montant des achats. Quelles sont les précautions pour qu'angularjs implémente le calcul du montant des achats. jetez un oeil.

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 étapes pour implémenter la récupération et la mise à jour en temps réel des zones de saisie dans vue2.0

Comment utiliser efficacement le serveur React Rendu latéral

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：Modification des paramètres dans l'URL sans actualiser dans React-RouterArticle suivant：Modification des paramètres dans l'URL sans actualiser dans React-Router

Articles Liés

Voir plus