快捷導(dǎo)航

angularjs實(shí)現(xiàn)的購物金額計(jì)算工具示例

更新時間：2018年05月08日 08:44:53 作者：Web攻城獅

這篇文章主要介紹了angularjs實(shí)現(xiàn)的購物金額計(jì)算工具,涉及AngularJS事件監(jiān)聽、數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了angularjs實(shí)現(xiàn)的購物金額計(jì)算工具。分享給大家供大家參考，具體如下：

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

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>m.fzitv.net angular購物金額計(jì)算器</title>
</head>
<body ng-controller="sum">
  價(jià)格:<input type="text" ng-model="cup.price">
  <br/><br/>
  數(shù)量:<input type="text" ng-model="cup.count">
  <p>運(yùn)費(fèi):{{cup.fee|currency:"¥"}}</p>
  <p>總金額:{{all()|currency:"¥"}}</p><!-- 過濾器currency -->
</body>
<script src="angular.min.js"></script>
<script>
  // 購物金額計(jì)算
  function sum($scope){
    $scope.cup={
      "price":12,
      "count":1,
      "fee":20
    }
    $scope.all=function(){
      return $scope.cup.price*$scope.cup.count;
    }
    // $watch
    // 監(jiān)聽變化
    // 有三個參數(shù)
    // 1.函數(shù)或?qū)傩?
    // 2.callback
    // 3.true深度監(jiān)聽
    $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>

運(yùn)行效果：