配列が変更されたときにネストされたループ内のng-repeatが更新されないようにする方法

Question

私はイベントの配列を持ち、各イベントにはチームが参加しています。これら2つのオブジェクトは関連していますが、どちらも他のオブジェクトのプロパティではありません。

私がしたいことは、すべてのイベントをループして、参加しているすべてのチームを表示することです。私は入れ子にされたng-repeatsを使ってこれをしようとします。私の問題は、内側のng-repeatは、外側のng-repeatの実行が終了すると表示されるだけです。最後に処理されたイベントにチームが参加したことがすべてのテーブルに表示されることを意味します。私のコントローラで

私はチームの配列を持っていると私はその配列私は新しいイベントを取得するたびに更新し、ここですべての

の配列が、私の繰り返しテーブルが

<div ng-repeat="event in events" ng-init="getTeams(event.eventId)"> 
    <div class="active title">Teams in {{event.eventName}} #{{event.eventId}}</div> 
      <table> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Sport</th> 
       <th>Motto</th> 
       <th>W-L-D</th> 
       <th>Description</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="team in teams"> 
       <td>{{team.teamName}}</td> 
       <td>{{team.teamSport}}</td> 
       <td>{{team.teamMotto}}</td> 
       <td>{{team.win}}- {{team.lose}} - {{team.draw}}</td> 
       <td>{{team.teamDescription}}</td> 
       </tr> 
      </tbody> 
      </table> 
    </div> 

で、ここにあります私のコントローラ

(function(){ 
angular 
    .module('foo') 
    .controller('EventController', function ($scope, $location, EventService) { 

     $scope.events = []; 
     $scope.targetEvent = {}; 
     $scope.teams = []; 

     EventService.getEvents() 
     .then(function(events){ 
      $scope.events = events; 
     }); 

     $scope.getTeams = function(currEventId){ 
      EventService.getTeams(currEventId) 
       .then(function(eventTeams) { 
       $scope.teams = eventTeams; 
      }) 
     } 
})() 

は私が動作していないようでトラックを使用しますがイベントIDまたはteamIdことによってそれを追跡しようとしています。事前にお手数をおかけします。

Answer 1

毎回teamsという変数を作成していますが、現在の実装ごとに、すべてのイベントに対してグローバルで単一です。私はあなたがここではng-initを使用する必要があるとは思わない、むしろイベントをループすることによってコントローラ自体の中でその操作を実行する。

EventService.getEvents().then(function(events){ 
    $scope.events = events; 
    //loop over each event. 
    events.forEach(function(event){ 
     EventService.getTeams(currEventId) 
     .then(function(eventTeams) { 
      //placed specific teams on event level 
      event.teams = eventTeams; 
     }) 
    }) 
}); 

次に、あなたはすぐ下にインナーng-repeatを変更し、ng-init

<tr ng-repeat="team in event.teams">