angularjs实现的购物金额计算工具示例
2018-05-08 08:44
851 查看
当我们用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:这里再为大家推荐几款在线计算工具供大家参考使用:
在线投资理财计算器:
http://tools.jb51.net/jisuanqi/touzilicai_calc
在线存款计算器:
http://tools.jb51.net/jisuanqi/cunkuan_calc
科学计算器在线使用_高级计算器在线计算:
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器:
http://tools.jb51.net/jisuanqi/jsq
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Java实现的贷款金额计算功能示例
- Angular实现可删除并计算总金额的购物车功能示例
- AngularJS实现的根据数量与单价计算总价功能示例
- angularJs小应用----计算购物金额-动态改变邮费
- angularjs之购物金额计算
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载]
- AngularJS使用ui-route实现多层嵌套路由的示例
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载续][重点推荐控件]
- AngularJS实现的锚点楼层跳转功能示例
- js实现rem自动匹配计算font-size的示例
- 实现工资自定义公式的计算方法示例
- angularjs实现时间轴效果的示例代码
- Python实现的文本对比报告生成工具示例
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载续][重点推荐控件]
- Activity之间的数据传输的示例(实现根据身高计算标准体重)
- AngularJS 前台分页实现的示例代码
- 利用jQuery实现购物车自动计算总金额
- AngularJS实现的输入框字数限制提醒功能示例
- AngularJS实现的简单拖拽功能示例
- 实现SQL动态列计算的示例