我试图做一些计算,但一旦输入金额,它就会完成。我只是希望这是发生在点击一个按钮,而不是自动。
我到目前为止做了什么
- <!DOCTYPE html>
- <html ng-app="myAppModule">
- <head>
- <title>Angular JS - programming-free.com</title>
- <link href="https://dl.dropBox.com/u/96099766/DetailModalExample/bootstrap.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="lib/angularjs.min.js"></script>
- </head>
- <body>
- <div ng-controller="myAppController" style="text-align:center">
- <p style="font-size:28px;">
- Enter Quantity:
- <input type="text" ng-model="quantity"/>
- </p>
- <h2>Total Cost: Rs.{{calculateval(quantity,10)}}</h2>
- </div>
- <script type="text/javascript">
- var myAppModule = angular.module('myAppModule',[]);
- myAppModule.controller('myAppController',function($scope,calculateService) {
- $scope.quantity=1;
- $scope.calculateval = function(xval,yval) {
- return calculateService.calculate(xval,yval);
- }
- });
- // Service
- myAppModule.factory('calculateService',function(){
- return {
- calculate: function(xval,yval){
- return xval*yval;
- }
- }
- });
- </script>
- </body>
- </html>
由于计算调用被绑定在模板中,因此在数量更改时显示其结果,因此立即进行计算。
- <div ng-controller="myAppController" style="text-align:center">
- <p style="font-size:28px;">Enter Quantity:
- <input type="text" ng-model="quantity"/>
- </p>
- <button ng-click="calculateQuantity()">Calculate</button>
- <h2>Total Cost: Rs.{{quantityResult}}</h2>
- </div>
接下来,更新您的控制器:
- myAppModule.controller('myAppController',calculateService) {
- $scope.quantity=1;
- $scope.quantityResult = 0;
- $scope.calculateQuantity = function() {
- $scope.quantityResult = calculateService.calculate($scope.quantity,10);
- };
- });
这是一个JSBin example,演示了上述方法。
这种方法的问题是计算结果保持可见与旧的值,直到按钮被点击。为了解决这个问题,您可以在数量变化时隐藏结果。
这将包括更新模板以在输入上添加更改,并在结果上添加ng-if:
- <input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/>
和
- <h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2>
在控制器中添加:
- $scope.showQuantityResult = false;
- $scope.calculateQuantity = function() {
- $scope.quantityResult = calculateService.calculate($scope.quantity,10);
- $scope.showQuantityResult = true;
- };
- $scope.hideQuantityResult = function() {
- $scope.showQuantityResult = false;
- };
这些更新可以在JSBin demo中看到。