CODEWITHSUNDEEP
angularjsclick
Abhishek Kumar
Abhishek Kumar

Reputation: 2286

Angularjs action on click of button

I am trying to do some calculation but it is getting done as soon as I enter the amount. I just want this to happen on click of a button rather than automatically.

What I have done so far:

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

Upvotes: 21

Views: 142805

Answers (1)

Ahmad Mageed
Ahmad Mageed

Reputation: 96497

The calculation occurs immediately since the calculation call is bound in the template, which displays its result when quantity changes.

Instead you could try the following approach. Change your markup to the following:

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

Next, update your controller:

myAppModule.controller('myAppController', function($scope,calculateService) {
  $scope.quantity=1;
  $scope.quantityResult = 0;

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

Here's a JSBin example that demonstrates the above approach.

The problem with this approach is the calculated result remains visible with the old value till the button is clicked. To address this, you could hide the result whenever the quantity changes.

This would involve updating the template to add an ng-change on the input, and an ng-if on the result:

<input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/>

and

<h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2>

In the controller add:

$scope.showQuantityResult = false;

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

$scope.hideQuantityResult = function() {
  $scope.showQuantityResult = false;
};

These updates can be seen in this JSBin demo.

Upvotes: 46

Related Questions