ng повторять не рендеринг при загрузке

Question

У меня есть страница рендеринга ng-repeat из данных, запрошенных через http.get, однако это не загрузка данных из запроса get. Что мне здесь не хватает?

HTML:

<div class="container-fluid" ng-show="isLoggedIn()"> 
<div class="row images"> 
    <div class="col-md-8 col-md-offset-2"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-4" ng-repeat="img in imgs"> 
       <div class="thumbnail"> 
        <img src="{{img.url}}"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Контроллер:

angular.module('imginterestApp') 
    .controller('GuestPageCtrl', function ($scope, $routeParams, $http) { 
    $scope.userName = $routeParams.userId; 
    console.log($scope.userName); 
    $scope.imgs = []; 

    $http.get('/api/images/').success(function(data){ 
     data.forEach(function(image){ 
     if(image.owner === $scope.userName) { 
      $scope.imgs.push(image); 
     } 
     }) 
     console.log($scope.imgs); 
    }); 
    }); 

Answer 1

Вы должны приложить ваш запрос GET для получения изображений в функцию и вызвать его. Это гарантирует, что ваш массив imgs будет содержать данные изображений.

angular.module('imginterestApp') 
 
    .controller('GuestPageCtrl', function ($scope, $routeParams, $http) { 
 
    $scope.userName = $routeParams.userId; 
 
    console.log($scope.userName); 
 
    $scope.imgs = []; 
 
    
 
    $scope.init = function() { 
 
\t \t $http.get('/api/images/').success(function(data){ 
 
     data.forEach(function(image){ 
 
     if(image.owner === $scope.userName) { 
 
      $scope.imgs.push(image); 
 
     } 
 
     }) 
 
     console.log($scope.imgs); 
 
    }); 
 
\t } 
 
\t 
 
\t $scope.init(); 
 
});