angularjs实现添加购物车金额计算功能
程序员文章站
2022-04-01 21:57:37
...
这次给大家带来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>
运行效果:
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是angularjs实现添加购物车金额计算功能的详细内容,更多请关注其它相关文章!
上一篇: PHP实现保留两位小数
下一篇: JS中new()用法剖析