Function called multiple times in Angular JS

Question

Consider the following html file with an angular script:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
</head>
<body ng-app="TestFirstApp" ng-controller="TestCtrl">

<script>
var app = angular.module('TestFirstApp', []);
app.controller('TestCtrl', function($scope) {
    $scope.amt = 50000;
    $scope.terms = 1;
    $scope.rate= 10;
    $scope.interestamt= function() {
        console.log("New value of amt, terms and rate: "+$scope.amt+ " "+$scope.terms+" "+$scope.rate);
        return ($scope.amt*$scope.rate*$scope.terms)/100;   
    };                  
});
</script>
<div>
<label>Enter Amount</label><input type="number" ng-model="amt"></input>
<br>
<label>Enter Years</label><input type="number" ng-model="terms"></input>
<br>
<label>Enter Rate P.A.</label><input type="number" ng-model="rate"></input>
<br>
<label>The interest amount is : {{ interestamt() }}</label>

</div>
</body>
</html>

When I open the page in browser and change any value in the input boxes, as expected due to binding the interest amount is calculated and the value updates in the label tag.But in the console, I noticed that the log statement gets printed 3 times every time i change either of the three values in the input boxes, meaning the function gets called multiple times. Can anyone explain why is the function getting called multiple times, instead of only once when any value is changed?

Bill P · Accepted Answer · 2019-09-17 12:36:55Z

1

This is how AngularJs works. Digest process initiates on any DOM event to check if any scope value has changed.

In general, it is a BAD practice to use functions into templates as they get triggered multiple times. This article will help you understand:

https://medium.com/@piyalidas.gcetts/digest-cycle-in-angularjs-32cf6f6dcd5a

A more clean approach would be using ng-change on each input, and setting a variable with the interest amount:

<input type="number" ng-model="amt" ng-change="interestamt()" />

Check the working demo: DEMO

answered Sep 17, 2019 at 12:36

Bill P

3,61610 gold badges24 silver badges34 bronze badges

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

Comments

Cristian Cimuca · Accepted Answer · 2019-09-17 12:41:58Z

0

i don't know why was called multiple times but i changed your code and declared in scope value for your view then called the function inside the controller $scope.interestamt();, it's running once, i believe the same result will be with ng-init and your function and instead of return to declare the value in scope (the interestamt).

You can do in controller like this as well (see jsfiddle2)

$scope.ints = interestamt();;

where interestamt() is:

    function interestamt() {
      console.log("New value of amt, terms and rate: "+$scope.amt+ " "+$scope.terms+" "+$scope.rate);
      return ($scope.amt*$scope.rate*$scope.terms)/100;   
    };

Here is the 1st example jsfiddle1

edited Sep 17, 2019 at 12:41

answered Sep 17, 2019 at 12:30

Cristian Cimuca

3072 silver badges8 bronze badges

Collectives™ on Stack Overflow

Function called multiple times in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related