Question

我试图添加分页，但我似乎无法弄清楚这最后一部分。尽管我的分页没有记录与用户关联的帖子数量，但所有内容都已设置完毕。

看到我正在做一个forEach，如果循环并将检索到的项目推送到一个空集合中，我的＆＃39; posts.length＆＃39;正在返回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);时，由于$scope.posts = [];在顶部声明（profileCtrl.js），我一直在猜0，我猜测它。

修改

在使用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初始化为{{1如果要在API返回0结果时显示列表，请添加null。这将阻止解析Bootstrap的分页指令，直到它所需的数据可用为止。

编辑：调试后，以下plunkr包含一个有效的实现：http://plnkr.co/edit/VQjNVK6gRKsCqxVb54nR?p=preview

由于循环，post.length保持为0 - AngularJS

1 个答案: