如何在AngularJS的ng-repeat中使用分页来处理服务请求

Question

我有一个在我的web应用程序中使用ng-repeat显示的项目列表，为了获得我调用启用分页的服务(rest)的项目，目前我能够显示第一页。现在我需要执行一些机制来进一步调用以加载第2、3页……只要用户滚动到当前页面的末尾。

例如，如果页面有20个项目，我在第一页，我向下滚动直到项目编号20，应用程序将调用第2页，项目数组将与新项目展开。

最重要的是，如果有一个"预加载"区域，它还不可见，但元素已经在那里，准备显示提供一个平滑的导航，类似于Android中的"PageAdaptar"，那将是非常好的。

在angular-js中最好的方法是什么?

Answer 1

这就是我最后做的

我正在使用jquery来检测当我在300像素或更小的接近底部，在这种情况下，我调用onScrollBottomEvent()从我的控制器，请注意，这个函数可能被调用n次滚动期间，如果用户是在300像素的范围内，他继续向下。

<script type="text/javascript">
var lastScrollTop = 0;
$(window).scroll(function(event) {
    scrolled = $(window).scrollTop() + $(window).height();
    scrollMax = $('#container').height() + 50;
    if(scrolled >= (scrollMax-300)) {
        angular.element('#container').scope().onScrollBottomEvent();
    }
});
</script>

然后onScrollBottomEvent()调用loadNextPage()使用apply() [important!］在loadNextPage中，我将onloadmorerequest_flag设置为true，因为我只需要调用一次就可以加载下一页，而不是调用每个像素滚动

$scope.onScrollBottomEvent = function(){
    $log.log("onScrollBottomEvent()");
    $scope.$apply(loadNextPage);
}
function loadNextPage(){
    $log.log("loadNextPage()");
    // execute only if there is other request on fly
    if (!$scope.onLoadMoreRequested){
        $scope.onLoadMoreRequested = true;
        $scope.appendNewItems($scope.search.data, $scope.lastLoadedPage + 1);
    }
}

最后我调用方法来调用服务

$scope.appendNewItems = function(search, page){
    $log.log("Loading items request for page " + page);
    $scope.footerProgressVisible = true;
    if ($scope.lastSearch != $scope.search.data){
        page = 0; // if search has changed, set page to zero
    }
    srvItems.getItems(search, function(result, page){
        $scope.footerProgressVisible = false;
        if (result!=null){
            $scope.items.push.apply($scope.items, result);
            $scope.lastLoadedPage = page;
            $scope.onLoadMoreRequested = false;
            $scope.lastSearch = $scope.search.data;
        }
    }, 
    $scope.currentCategoryId,
    page);
};

关键行

 $scope.items.push.apply($scope.items, result);

会自动展开我的ng-repeat