Действие Angularjs при нажатии кнопки

Я пытаюсь выполнить некоторые вычисления, но это делается, как только я ввожу сумму. Я просто хочу, чтобы это произошло нажатием кнопки, а не автоматически.

Что я сделал до сих пор:

<!DOCTYPE html>
<html ng-app="myAppModule">
  <head>
    <title>Angular JS - programming-free.com</title>
    <link href="#" onclick="location.href='https://dl.dropbox.com/u/96099766/DetailModalExample/bootstrap.css'; return false;"  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>

Ответы

Ответ 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, демонстрирующий вышеуказанный подход.

Проблема с этим подходом - результат вычислений остается видимым со старым значением до щелчка кнопки. Чтобы решить эту проблему, вы можете скрыть результат всякий раз, когда изменяется 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.