post.length остается 0 из-за цикла - AngularJS

Question

Я пытаюсь добавить разбивку на страницы, но я не могу понять эту последнюю часть. Все настроено, хотя моя разбивка на страницы не записывает количество сообщений, связанных с пользователем.

Видя, что я делаю Foreach и если цикл и толкая извлекаемые элементы в пустую коллекцию, мой «posts.length» возвращается 0.

Поэтому нумерация страниц только показывает страницу 1/1 и не 1/2 (например).

Вот мой полный код:

profileCtrl.js

Вот http.get $ - Я стараюсь, чтобы получить все сообщения о том, что авторизированные пользователь сделал делает этот цикл:

app.controller('profileCtrl', function($scope, auth, $http, $log) { 

    $scope.auth = auth; 
    $scope.date = auth.profile.created_at; 
    $scope.pageSize = 5; 
    $scope.posts= []; 

    $http.get('URL') 
     .then(function(result) { 
      angular.forEach(result.data, function(data, key) { 
       if(data.userId === auth.profile.user_id) { 
        $scope.posts.push(data); 
      } 
     }); 
    }); 
}); 

profile.html Как вы можете видеть, что я пытаюсь получить длину поста в сообщениях с помощью total-items="posts.length":

<div class="col-md-8 no-padding-right"> 
    <div class="panel panel-primary"> 
     <div class="list-group-item active text-center"> 
      <h4 class="no-margin-top no-margin-bottom">Recent Activity</h4> 
     </div> 

     <a href="#" class="list-group-item" ng-repeat="post in posts| startFrom: (currentPage - 1) * pageSize | limitTo: pageSize | orderBy :'created_at':true"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <div class="thumbnail no-border no-margin-bottom">   
         <img src="https://placehold.it/150x150" alt="bird" width="150" height="150"/> 
        </div> 
       </div> 
       <div class="col-md-8"> 
        <h4 class="no-margin-top no-margin-bottom"><strong>{{post.birdname}}</strong></ 
       </div> 
      </div> 
     </a> 
     <uib-pagination total-items="posts.length" ng-model="currentPage" max-size="pageSize" boundary-link-numbers="true"></uib-pagination> 
    </div> 
</div> 

app.js Я также добавил фильтр в app.js:

app.filter('startFrom', function() { 
    return function(data, start) { 
    return data.slice(start); 
    } 
}); 

Когда я console.log(posts.length); я получаю 0, и я предполагаю, что это из-за $scope.posts = []; объявленной на вершине (profileCtrl.js).

Edit:

После этого немного отладки с console.log, я получить значение, даваемое при этом:

$http.get('url') 
     .then(function(result) { 
      angular.forEach(result.data, function(data, key) { 
       if(data.userId === auth.profile.user_id) { 
        $scope.posts.push(data); 
      } 
     }); 
     console.log($scope.posts.length); 
    }); 

Как мне это исправить?

Answer 1

Если вы ждете, пока данные будут возвращены перед загрузкой коллекции (с нумерацией страниц) либо добавить ng-if="posts.length" в контейнер, или инициализирует $scope.posts как null и добавить ng-if="posts", если вы хотите, чтобы список, чтобы показать, когда API возвращает 0 результатов. Это предотвратит синтаксическую разметку директивы разбиения на страницы Bootstrap до тех пор, пока не будут доступны необходимые данные.

Edit: После отладки, следующий plunkr содержит рабочую реализацию: http://plnkr.co/edit/VQjNVK6gRKsCqxVb54nR?p=preview