Comment utiliser AngularJS pour créer un outil de calcul du montant des achats-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-31 10:03:01

original

1425 Les gens l'ont consulté

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>

Copier après la connexion

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!