Angularjs action on click of button

Question

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>

Ahmad Mageed · Accepted Answer · 2014-02-11 05:33:12Z

46

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.

edited Feb 11, 2014 at 5:33

answered Feb 11, 2014 at 5:21

Ahmad Mageed

96.9k20 gold badges170 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Kumar Over a year ago

Tnkyou somuch for quick reply. One more small help. if i want to perform same task to calculate the value on different rates in a tabular format on the basis of value entered in one text box,say, some thing like this investing.com/forex-tools/fibonacci-calculator

Ahmad Mageed Over a year ago

@AbhishekKumar no problem. I suggest you create a new question and explain exactly what you need, since this is a very different request. Post a new question and show examples of expected inputs and outputs, along with any code you tried, and someone will help you.

Collectives™ on Stack Overflow

Angularjs action on click of button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related