0

My test data set has one element in the array. I am using an ng-repeat to loop through the array to display the element. The display HTML calls a function per rendered element - in this case, it should only be called once because there is only one element in the array. However, even though only one element is being displayed properly, I am seeing the function being called 3 times even though it should only be called once.

The element is clickable, revealing sub-info of that main element. When the element is clicked, the same function is called a 4th time.

My data set, output from a console.log(clubs) in the controller:

{success: true, data: Array(1)}
data: Array(1)
  0: {clID: "1", cID: "1001", clTime: "19:29:15", clDate: "2018-08-27", clActive: "1", …}
  length: 1
  __proto__: Array(0)
  success: true
  __proto__: Object

The HTML from my template. The {{ showClub() }} is a test function simply to show how many times the function is being called and is displaying console.log output. In this case, the ng-repeat is calling it 3 times...and should only be calling it once. Note there is a.:

  <div id="club_tabItem_{{club.cID}}" style="padding:5px;border-bottom:1px solid grey;" ng-click="showEvents(club.clID);" class="item-remove-animate item-avatar" ng-repeat="club in clubs.data">
    <div id="loc_{{club.clID}}" style="left:15px;">
      <h3>{{club.clVendor}}
      {{ showClub() }}  <!-- this is the test function -->
        <!-- <span style="margin-left:15px;">Location: {{club.data[0].clAddress1}}, {{club.data[0].clCity}}</span> -->
        <i style="font-size:25px;float:right;" class="icon ion-android-arrow-dropdown-circle icon-accessory customColor1"></i>
      </h3> 
      <span style="padding-left:30px;">{{club.clDesc}}</span>
      <div id="eventsDiv_{{club.clID}}" style="width:100%;display:none;margin-top:10px;background-color:lightGrey;"
        ng-if="club.cID == event.cID"
        ng-click="$location.url('/tab/clubs/{{event.ceID}}')"
        ng-repeat="event in club.events"
      >
        <div id="events_{{event.ceID}}" style="width:80%;margin-left:20%;display:inline-block;" >
          <div style="float:left;font-size:14px;font-weight:bolder;">{{event.ceName}} ({{event.ceName1}}) </div>
          <div style="float:left;margin-left:15px;">Location: {{club.clAddress1}}, {{club.clCity}}</div> 
          <div style="float:left;margin-left:15px;">Next: {{ nextEvent(event) }}</div>         
        </div>
      </div>
    </div>
  </div>

The above rendered HTML lists the one element...when its clicked on, to unhide the sub-elements, the same {{ showClub() }} is called again for a 4th time.

Init Club: 0
Init Club: 1
Init Club: 2
<!-- above three outputs are from initial ng-repeat, below is from clicking on the rendered element, triggering the same function call again -->
Init Club: 3

In my controller:

  clubService.all()
  .then(function(response) {
    $scope.clubs = response ;
    console.log($scope.clubs) ;  //output above
  }) ;
  $scope.clubCount = 0 ;
  $scope.showClub = function() {
    console.log("Init Club: " +$scope.clubCount) ;
    $scope.clubCount++ ;
  }

My biggest concern is that when I move to real data...that will list 10 items on average, that instead of 10 separate calls its going to be making a total of 40.

What is causing the ng-repeat to do this? (assuming this is the issue).

rolinger
  • 2,787
  • 1
  • 31
  • 53
  • 2
    You are seeing an effect of how the `$digest` cycle in angular works here. `ng-repeat` isn't a strict loop that only fires one time. Instead, it is re-evaluated every time that a new element must be added or changed in the DOM. and since you have an inner `ng-repeat` that would also be causing the DOM to be re-evaluated..... This is a prime example of why putting function calls in the DOM render loop is a bad idea. – Claies Nov 19 '18 at 17:47
  • @Claies - oy! I never new that. I thought it was a strict loop. My html renders properly but seeing this function repeat itself made me concerned. I will try to figure out another way of getting the data from the function call before the html is rendered. Been scratching my head on this one for a while. – rolinger Nov 19 '18 at 18:11
  • Possible duplicate of [Using function with ng-repeat causing infinite digest loop](https://stackoverflow.com/questions/41970308/using-function-with-ng-repeat-causing-infinite-digest-loop) – nircraft Nov 20 '18 at 21:21

0 Answers0