Post.length bleibt 0 wegen Schleife - AngularJS

Question

Ich versuche, Paginierung hinzuzufügen, aber ich kann nicht scheinen, diesen letzten Teil herauszufinden. Alles ist eingerichtet, obwohl meine Paginierung nicht die Anzahl der Posts aufzeichnet, die mit dem Benutzer verknüpft sind.

Sehen, dass ich eine forEach tun und wenn Schleife und die abgerufenen Elemente in eine leere Auflistung drängen, meine ‚posts.length‘ zurückkehrt nur 0.

Daraus ergibt sich die Paginierung zeigt Seite 1/1 und nicht 1/2 (zum Beispiel).

Hier ist mein vollständiger Code:

profileCtrl.js

Hier ist die http.get $ ist - Ich versuche, die Beiträge alle zu bekommen, dass die angemeldeten Benutzer diese Schleife gemacht tun:

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 Wie Sie sehen können, ich versuche, die Länge des Pfostens in Beiträge zu bekommen total-items="posts.length" mit:

<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 ich auch einen Filter in app.js hinzugefügt:

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

Wenn ich console.log(posts.length); Ich halte 0 bekommen und ich vermute, es ist wegen der oben erklärt $scope.posts = []; ist (profileCtrl.js).

Edit:

Nach einem bisschen Debuggen mit console.log tun, mir den Wert gegeben werden, wenn dies zu tun:

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

Wie soll ich dieses Problem beheben?

Answer 1

Wenn Sie warten auf Daten vor dem Laden die Sammlung (mit Paginierung) entweder ein ng-if="posts.length" zum Container hinzufügen zurückgegeben werden, oder initialisieren $scope.posts als null zu sein und fügt ng-if="posts" wenn Sie die Liste wollen, dass die API zu zeigen, wenn gibt 0 Ergebnisse zurück. Dies verhindert, dass die Paginierungsanweisung von Bootstrap geparst wird, bis die benötigten Daten verfügbar sind.

Edit: Nach Debugging, die folgende plunkr enthält eine Arbeits Umsetzung: http://plnkr.co/edit/VQjNVK6gRKsCqxVb54nR?p=preview