AngularJS：不明なエラー：[$ rootScope：infdig]

Question

私は各ゲームのすべての裁判所を取得しようとしています

<div ng-repeat = "g in games"> 
{{g.gameName}} 
<ul> 
<li ng-repeat = "c in getCourts(g.id)" ng-bind = "c.courtName"></li> 
</ul> 
</div> 

コントローラは次のとおりです。

私はこれを実行すると

$scope.games = {}; 
    $scope.courts = {}; 
    //$scope.slots = {}; 

    $http.get(URI+"booking/allGames").then(function success(res){ 
     $scope.games = res.data; 
     //console.log($scope.games); 
    }, 
    function error(res){ 
     console.log(res.data.message); 
    }); 

    $scope.getCourts = function(gameId){ 

     //courts = {}; 
     $http.get(URI+"booking/courts/"+gameId).then(function success(res){ 

      //console.log(gameId); 
      console.log(res.data); 
      return res.data; 
      //return courts; 
     }, 
     function error(res){ 
      console.log(res.data.message); 
     });; 
    } 

、私はこのエラーを取得：

angular.min.js:6 Uncaught Error: [$rootScope:infdig] 

私はこの答えを見

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle.

One common mistake is binding to a function which generates a new array every time it is called.

言うdocumentaion 210

angularJS、：AngularJS use a function in a controller to return data from a service to be used in ng-repeat

しかし、私はこの問題を解決する方法がないと確信しています。

Answer 1

私は、あなたがちょうど私がフィルの答えをお勧めしません

<div ng-repeat="g in games"> 
    {{g.gameName}} 
    <ul> 
     <li ng-repeat="c in g.courts" ng-bind="c.courtName"></li> 
    </ul> 
</div> 

Answer 2

ネストされたリピータを使用することができます

$http.get(URI+"booking/allGames").then(res => { 
    $q.all(res.data.map(game => { 
     return $http.get(URI+"booking/courts/"+game.id).then(res => { 
      return angular.extend(game, {courts: res.data}); 
     }); 
    })).then(games => { 
     $scope.games = games; 
    }); 
}); 

...あなたの唯一のオプションは、このようなすべてのデータをプリフェッチすることだと思います。ここで

は私の別のアプローチ

注です：私はデモ用のデータをハードコーディング、あなたはフィドルあなたのケースで

//html 
<div ng-controller="MyCtrl"> 
    <div ng-repeat = "g in games"> 
    {{g.gameName}} 
    <ul ng-init='getCourts(g.id)'> 
    <li ng-repeat = "c in courts[$index]" ng-bind = "c.data"></li> 
    </ul> 
    </div> 
</div> 

//js 

$scope.courts = []; 
$scope.games = [ 
    { 
    id:1, 
    gameName:'A' 
    },{ 
    id:2, 
    gameName:'B' 
    },{ 
    id:3, 
    gameName:'C' 
    } 
]; 
$scope.getCourts = function(id){ 
    if(id==1){ 
    $scope.courts[0]=[{data:'first'},{data:'second'}]; 
    }else if(id == 2){ 
    $scope.courts[1]=[{data:'third'},{data:'fourth'}]; 
    }else{ 
    $scope.courts[2]=[{data:'five'},{data:'six'}]; 
    } 
} 

をHTTPを呼び出す必要があります：http://jsfiddle.net/Lvc0u55v/8061/