怎麼使用angularjs做出購物金額計算工具-js教程-PHP中文網

怎麼使用angularjs做出購物金額計算工具

php中世界最好的语言

發布： 2018-05-31 10:03:01

原創

1425 人瀏覽過

這次帶給大家怎樣使用angularjs做出購物金額計算工具，怎麼樣angularjs做出購物金額計算工具的注意事項有哪些，下面就是實戰案例，一起來看一下。

當我們用js或jquery進行購物車金額計算的時候會非常麻煩,今天,我們用angularjs一種新的方法進行購物車總額的計算.代碼如下:

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

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！