angularjs实现的购物金额计算工具示例

2019-11-19 13:54:06

字体：大中小

来源：转载

供稿：网友

本文实例讲述了angularjs实现的购物金额计算工具。分享给大家供大家参考，具体如下：

当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下:

<!DOCTYPE html><html ng-app><head>  <meta charset="UTF-8">  <title>www.VeVB.COm 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>

运行效果：