Javascript 通过在AngularJS中的另一个数组底部添加$resource queried数组来加载分页

我正在尝试为我的Angular应用程序设置加载，这样当有人转到第2页时，第3页将在后台加载

我正在使用

$resource

与

Post.query（）

一起查询

Posts

Post.query（{page:1}）

获取ID为0-9的Post记录数组

我的实际Post控制器接受指定页面的参数：

posts.json？page=1

，其中每个页面有10篇文章

基本上我想在加载时查询第1页和第2页，然后将它们连接为：

$scope.visiblePosts

。当用户在第2页时，我希望第3页在后台加载，并将第3页与

$scope.visiblePosts

连接起来

对于分页，我使用以下代码：

视图：

控制器：

$scope.currentPage = 1;

$scope.pageSize = 10;

$scope.noOfPages = Math.ceil($scope.posts.length / $scope.pageSize);

$scope.noPrev = function() {
  return $scope.currentPage === 1;
};

$scope.noNext = function() {
  return $scope.currentPage === $scope.noOfPages;
};

$scope.prevPage = function() {
  return $scope.setPage($scope.currentPage - 1);
};

$scope.nextPage = function() {
  return $scope.setPage($scope.currentPage + 1);
};

$scope.setPage = function(pageNo) {
  return $scope.currentPage = pageNo;
};

$scope.filter = function() {
  return window.setTimeout((function() {
    return $scope.noOfPages = Math.ceil($scope.filtered.length / $scope.pageSize);
  }), 10);
};

$scope.$watch("currentPage", $scope.setPage);

---

非常感谢您的帮助，似乎没有任何效果。我已经尝试过concat（）和其他一些方法。

首先，不要在角度摘要周期之外修改范围。忘记

setTimeout

和

setInterval

。相反，请使用

$timeout

和

$interval

内置服务。在您的情况下，您应该尝试

$evalAsync

：

另外，

$scope.$watch（“currentPage”，$scope.setPage）

对我来说毫无意义

最后，切中要害的是：每次导航到下一页时，控制器（以及作用域）都会被实例化，因此不能在不同的页面上保留作用域中的数据

与控制器不同，服务是单例的，只实例化一次，从不销毁

您应该创建一个服务来保持已加载的帖子并预加载下一页。您的控制器应仅向此服务请求需要显示的页面

这种方法的另一个好处是不再需要过滤器

您也可以使用来自的缓存来保存数据，或者只使用服务的

缓存

选项。然后，您只需在显示当前页面后预加载下一个页面，以便下一次它将立即从缓存中加载

示例：

function MyController($scope, $resource) {

    var res = $resource("/posts.json", {}, {
        query: {
            method: 'GET',
            isArray: true,
            // enable caching:
            cache: true
        }
    });

    $scope.currentPage = 1;

    $scope.$watch("currentPage", function() {
        $scope.posts = res.query({
            page: $scope.currentPage
        });
        // precache the next page:
        res.query({
            page: $scope.currentPage + 1    
        });
    });

}

您在控制器的何处查询帖子？什么是

visiblePosts

，它是在哪里定义的？你能分享

Post

服务的代码吗？到底是什么不起作用？控制台中是否有任何错误？所有内容都写得很清楚。Posts查询正确返回所有内容，visible Posts是一个范围变量，其中包含检索到的集合。连接不起作用，控制台中没有错误。即使没有赏金，许多人也可以帮助你，如果不是在CoffeScript中：谢谢，我编辑了它。阅读良好。这是一个单页应用程序，尽管这些页面代表了要在我的单页appAlmost中显示的集合的各个部分。几乎每个角度驱动的网站都是一个单页应用程序（又称SPA）。那么，你是指SPA，还是说所有页面都有相同的URL？无论如何，无论您是将状态保留在服务还是范围中，在

$resource

中使用

cache:true

可能是最简单的解决方案。但这不需要查询整个集合吗？这会减慢加载时间为什么要整个集合？看我的答案，我添加了一个例子。

$scope.currentPage = 1;

$scope.pageSize = 10;

$scope.noOfPages = Math.ceil($scope.posts.length / $scope.pageSize);

$scope.noPrev = function() {
  return $scope.currentPage === 1;
};

$scope.noNext = function() {
  return $scope.currentPage === $scope.noOfPages;
};

$scope.prevPage = function() {
  return $scope.setPage($scope.currentPage - 1);
};

$scope.nextPage = function() {
  return $scope.setPage($scope.currentPage + 1);
};

$scope.setPage = function(pageNo) {
  return $scope.currentPage = pageNo;
};

$scope.filter = function() {
  return window.setTimeout((function() {
    return $scope.noOfPages = Math.ceil($scope.filtered.length / $scope.pageSize);
  }), 10);
};

$scope.$watch("currentPage", $scope.setPage);

function MyController($scope, $resource) {

    var res = $resource("/posts.json", {}, {
        query: {
            method: 'GET',
            isArray: true,
            // enable caching:
            cache: true
        }
    });

    $scope.currentPage = 1;

    $scope.$watch("currentPage", function() {
        $scope.posts = res.query({
            page: $scope.currentPage
        });
        // precache the next page:
        res.query({
            page: $scope.currentPage + 1    
        });
    });

}

<div ng-repeat="post in posts">