I use a function in an ng-repeat, but it repeats many times more than the total length of the array

Question

I am iterating over an array of 5 elements, and I call a function inside the ng-repeat.

$scope.myArray=[1,2,3,4,5]
var i=0;
$scope.diffHours= function(){
    i++;
    console.log(i)
    return "string";
}

<div ng-repeat="item in myArray">
  {{diffHours()}} 
</div>

in the console it appears that this function is being called in total 40 times, when the array has only 5 elements, then this function should be used only 5 times in this case.

this is my code:

<script id="view.html" type="text/ng-template">
<ion-view view-title="Second page">
  <ion-content class="padding">
      <div ng-repeat="item in myArray">
         {{diffHours()}} 

      </div>            
  </ion-content>
</ion-view>

nameApp.controller('ViewCtrl', function($scope, $stateParams, $ionicHistory) 
{
  $scope.myArray=[1,2,3,4,5]
  var i=0;
  $scope.diffHours= function(){
      i++;
      console.log(i)
      return "string";
  }
});

I have a real example where I have a series of more complex operations and libraries that I could not include. but this small example helps me explain my problem.

What am I doing wrong?

Link updated:

https://plnkr.co/edit/e8Jfu000vbvnGS9QfnWQ?p=preview

why you are using the function if you only needs to return string just want to know your use case. — Atul, Aug 18 '18 at 18:44
@Atul I have a real example where I have a series of more complex operations and libraries that I could not include. but this small example helps me explain my problem. — yavg, Aug 18 '18 at 18:45
thanks, the reason should be angular digest cycle, although let me check what we can do here? — Atul, Aug 18 '18 at 18:51
@Atul I thank you, I have been on this same problem for a long time. — yavg, Aug 18 '18 at 18:55
checkout this https://plnkr.co/edit/J14VXgfO3Af6b5x86OEO?p=preview — Atul, Aug 18 '18 at 18:58

score 0 · Answer 1 · answered Aug 18 '18 at 19:02

Angular has a digest cycle due to $scope, so anytime you change $scope it will rerun everything, since you are using a function it will call the function again to get new values hence there will be performance glitch. Try to refrain from creating any new key in $scope , create var variables. offcourse you need to create $scope variable for binding it to html :)

nameApp.controller('ViewCtrl', function($scope, $stateParams, $ionicHistory) {
  var myArray = [1, 2, 3, 4, 5],
    diffArray = [];
    var i = 0;
    var diffHours = function() {
      i++;
      console.log(i)
      return "string";
    }

  myArray.forEach(function(item) {
    diffArray.push(diffHours(item))
  })
  $scope.diffArray = angular.copy(diffArray);

});

Also you can use track by and give some unique value , i have given index here but it will depend on the data you get .

 <div ng-repeat="item in diffArray track by $index">
         {{item}} 

      </div>

Hope this answers your query , good luck !

I use a function in an ng-repeat, but it repeats many times more than the total length of the array

1 Answers1