angularjs实现的购物金额计算工具示例
程序员文章站
2022-06-24 23:09:21
本文实例讲述了angularjs实现的购物金额计算工具。分享给大家供大家参考,具体如下:
当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用an...
本文实例讲述了angularjs实现的购物金额计算工具。分享给大家供大家参考,具体如下:
当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下:
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>www.jb51.net 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>
运行效果:
ps:这里再为大家推荐几款在线计算工具供大家参考使用:
在线投资理财计算器:
在线存款计算器:
科学计算器在线使用_高级计算器在线计算:
在线计算器_标准计算器:
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
下一篇: k8s部署docker容器的实现