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    lt  DOCTYPE html gt   lt html ng-app  myAppModule  gt     lt head gt       lt title gt Angular JS - programming-free com lt  title gt       lt link href  https   dl dropbox com u 96099766 DetailModalExample bootstrap css   rel  stylesheet  type  text css    gt       lt script type  text javascript  src  lib angularjs min js  gt  lt  script gt     lt  head gt     lt body gt       lt div ng-controller  myAppController  style  text-align center  gt         lt p style  font-size 28px   gt          Enter Quantity           lt input type  text  ng-model  quantity   gt         lt  p gt         lt h2 gt Total Cost  Rs   calculateval quantity 10    lt  h2 gt       lt  div gt       lt script type  text javascript  gt        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                                                        lt  script gt     lt  body gt   lt  html gt

User · Accepted Answer

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.

[angularjs] Angularjs action on click of button

Examples related to angularjs

Examples related to click