ng-repeat à travers un tableau d'objets

Question

Je crée une petite shoutbox avec JS angulaire et StamPlay. Par conséquent, j'ai créé une 'Test Shouts' que peut être accesed via un URL

Dans mon application angulaire J'ai créé un service pour récupérer les données:

app.factory('shouts', ['$http', function ($http) { 
 

 
    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts').success(function (data) { 
 
     return data.data; 
 
    }); 
 

 
}]);

intérieur mon MainController Je joins les données à la $ scope.

app.controller('HomeController', [ 
 
    '$scope', 
 
    'shouts', 
 

 
    function ($scope, shouts) { 
 
     $scope.shouts = shouts; 
 
    } 
 

 
]);

Mais quand je suis tyring à ng-répéter à travers les données [], je ne peux pas accéder aux objets à l'intérieur. Je ne comprends pas quel est le problème.

<div ng-repeat="shout in shouts"> 
 
    {{shout.title}} 
 
</div>

Answer 1

cris est une promesse de $ même si vous ne "retour data.data". Vous devez donc affecter $ scope.shouts lorsque la promesse est résolue.

app.factory('shouts', ['$http', function ($http) { 

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts'); 

}]); 

app.controller('HomeController', [ 
    '$scope', 
    'shouts', 

    function ($scope, shouts) { 
     shouts.then(function(data) { $scope.shouts = data.data}); 
    } 

]); 

Une autre option est de résoudre des cris en vous config de la route et l'injecter dans le contrôleur

$routeProvider 
.when("/home", { 
    templateUrl: "home.html", 
    controller: "HomeController", 
    resolve: { 
     shout_data: shouts 
    } 


app.controller('HomeController', [ 
    '$scope', 
    'shout_data', 

    function ($scope, shout_data) { 
     $scope.shouts = shout_data; 
    } 

]); 

Answer 2

Avez-vous oublié d'attacher votre contrôleur au code HTML?

<div ng-controller="HomeController"> 
    <div ng-repeat="shout in shouts"> 
     {{shout.title}} 
    </div> 
</div> 

Plus d'informations sur ngController: https://docs.angularjs.org/api/ng/directive/ngController