angularjs实现自动计算商品总价格代码实例
分类:实例代码
本章节分享一段代码实例,它实现了自动计算商品总价格的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> 单价:<input type="text" ng-model="pen.money" /><br /> 数量:<input type="text" ng-model="pen.number" /><br /> 商品总价:{{proPrice() | currency : '¥'}}<br /> 运输费用:{{pen.trans | currency : '¥'}}<br /> 总额:{{proPrice()+pen.trans | currency : '¥'}} </div> </div> <script> var app = angular.module("myApp", []); app.controller('myController', function ($scope) { $scope.pen={ money:1.5, number:1, trans:8 } $scope.proPrice = function(){ return $scope.pen.money*$scope.pen.number; } $scope.$watch($scope.proPrice,function(newVal,oldVal){ $scope.pen.trans = newVal>=5?0:8; }) }) </script> </body> </html>
angularjs实现自动计算商品总价格代码实例,这样的场景在实际项目中还是用的比较多的,关于angularjs实现自动计算商品总价格代码实例就介绍到这了。
angularjs实现自动计算商品总价格代码实例属于前端实例代码,有关更多实例代码大家可以查看。