Nsryjdtyk

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).