使用 Angular JS 的自定义分页 - 需要在第一页显示 div 元素，这应该在第二页上重复单击下一步

Posted 2023-03-05

【中文标题】使用 Angular JS 的自定义分页 - 需要在第一页显示 div 元素，这应该在第二页上重复单击下一步

【英文标题】：Custom Pagination using Angular JS- Need to display div elements in first page which should get repeated on 2nd page clicked Next

【发布时间】：2016-01-19 14:48:12

【问题描述】：

我有一个分页窗格。我有一个大小为 42 的数组。第一页显示 24 个 div 元素，第二页显示剩余的 18 个元素。

我的问题是如何在第 1 页中显示元素 1 到 24，在第二页中显示元素 19 到 42 - 这意味着我需要在这两个页面中重叠元素。

实现的html代码如下：

    <div class = "addPage" ng-repeat="item in selectedItems.itemsArr| startFrom:currentPage*pageSize | limitTo:pageSize"> Item$index+1
    </div> 

对于上述： 页面大小=24， currentPage=0（点击Next时变为1）

做同样的事情的JS代码如下（跟随这个小提琴：http://jsfiddle.net/2ZzZB/56/）：

       .filter('startFrom', function() 
            return function(input, start) 
                if (!input || !input.length)  return; 
                else            
                        start = +start; //parse to int
                        return input.slice(start);
                    
             
        );

【参考方案1】：

使用startFrom: 过滤器中的函数，您可以控制数据集中最后一页的显示。这使您的结果显示大小保持一致，并为您提供所需数据的重叠。

更新小提琴：http://jsfiddle.net/zr9nd0rx/1/

<li ng-repeat="item in data | startFrom: startFromCalculator()| limitTo:pageSize">


$scope.startFromCalculator = function() 
   if ($scope.currentPage + 1 == Math.ceil($scope.data.length/$scope.pageSize)) 
       return $scope.data.length - $scope.pageSize;
    else         
       return $scope.currentPage*$scope.pageSize;