recherche

Maison >interface Web >js tutoriel >Comment utiliser AngularJS pour créer un outil de calcul du montant des achats

Comment utiliser AngularJS pour créer un outil de calcul du montant des achats

php中世界最好的语言
php中世界最好的语言original
2018-05-31 10:03:011493parcourir

Cette fois, je vais vous montrer comment utiliser angularjs pour créer un outil de calcul du montant des achats, et quelles sont les notes sur la façon d'utiliser Angularjs pour créer un outil de calcul du montant des achats . Ce qui suit est un cas pratique.

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>

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 Web chinois de php !

Lecture recommandée :

Comment utiliser Webstorm pour ajouter des fichiers *.vue

Comment créer une démarque pour mpvue mini Adaptation du programme

Comment utiliser vue.js pour créer une fonction d'édition de recettes

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：Comment gérer le paramètre Url dans React-Router sans actualiser la pageArticle suivant：Comment gérer le paramètre Url dans React-Router sans actualiser la page

Articles Liés

Voir plus