Question

我正在尝试进行一些计算，但是一旦我输入金额就会完成。我只是想通过点击按钮而不是自动发生这种情况。

到目前为止我做了什么：

<!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>

Answer 1

由于计算调用在模板中绑定，因此会立即进行计算，模板会在quantity更改时显示其结果。

相反，您可以尝试以下方法。将您的标记更改为以下内容：

<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', function($scope,calculateService) {
  $scope.quantity=1;
  $scope.quantityResult = 0;

  $scope.calculateQuantity = function() {
    $scope.quantityResult = calculateService.calculate($scope.quantity, 10);
  };
});

这是展示上述方法的JSBin example。

此方法存在的问题是，在点击按钮之前，使用旧值仍然可以看到计算结果。要解决此问题，您可以在quantity更改时隐藏结果。

这将涉及更新模板以在输入上添加ng-change，并在结果上添加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中看到这些更新。

Angularjs单击按钮时的操作

1 个答案: