AngularJS: Nicht abgefangene Fehler: [$ rootScope: infdig]

Question

Ich versuche, für jedes Spiel alle Gerichte zu bekommen:

Das HTML sieht wie folgt aus:

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

Der Controller ist:

$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); 
     });; 
    } 

Als ich dies ausführen, ich bekomme diese Fehlermeldung:

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

Die AngularJS documentaion sagt

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.

ich diese Antwort sah: AngularJS use a function in a controller to return data from a service to be used in ng-repeat

Aber ich bin nicht sicher, wie dies zu beheben.

Answer 1

Ich denke, die einzige Möglichkeit, dies Pre-Fetch alle Daten wie ...

$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; 
    }); 
}); 

Dann können Sie einfach einen verschachtelten Repeater

<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

verwende ich Phils Antwort empfehlen.

Hier ist mein alternativer Ansatz

Hinweis: ich die Daten für die Demonstration nur fest einprogrammiert, müssen Sie http in Ihrem Fall

//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'}]; 
    } 
} 

Geige nennen: http://jsfiddle.net/Lvc0u55v/8061/