Question

我的测试数据集在数组中有一个元素。我正在使用ng-repeat遍历数组以显示元素。显示HTML为每个呈现的元素调用一个函数-在这种情况下，仅应调用一次，因为数组中只有一个元素。但是，即使只正确显示一个元素，我也看到该函数被调用了3次，即使该函数只能被调用一次。

该元素是可单击的，显示该主要元素的子信息。单击该元素时，该功能被称为第四次。

我的数据集，从控制器中的console.log(clubs)输出：

{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

模板中的HTML。 {{ showClub() }}是一个测试函数，仅用于显示该函数被调用了多少次并显示console.log输出。在这种情况下，ng-repeat调用了3次...并且应该只调用一次。请注意有一个：

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

上面呈现的HTML列出了一个元素...在单击它时，要取消隐藏子元素，将再次调用相同的{{ showClub() }}。

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

在我的控制器中：

  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++ ;
  }

我最大的担心是，当我转向真实数据时……平均将列出10个项目，而不是10个单独的呼叫，总共将产生40个。

是什么导致ng-repeat这样做？（假设这是问题所在）。

Angular ng-repeat导致多个循环

0 个答案: