当我们用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="https://www.jb51.net/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>
运行效果：
PS：这里再为大家推荐几款在线计算工具供大家参考使用：
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》