使用Angular JS进行自定义分页 - 需要在第一页中显示div元素，在第二页上单击Next时应该重复该元素 [英] Custom Pagination using Angular JS- Need to display div elements in first page which should get repeated on 2nd page clicked Next

问题描述

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

我的问题是如何显示第1页中的元素1到24和第2页中的元素19到42 - 含义我需要这2页中的元素重叠。

$

 < div class =addPageng-repeat = item in selectedItems.itemsArr | startFrom：currentPage * pageSize | limitTo：pageSize>商品{{$ index + 1}} 
< / div> 
  

上述内容：
pageSize = 24，
currentPage = 0（已更改当点击下一步时为1）

执行相同操作的JS代码如下所示（遵循这个小提琴：

解决方案使用 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; 
} 
} 
  

1. I have a paginated pane. I have an array of size 42. The first page shows 24 div elements and the second page shows the remaining 18 elements.

2. My question is how do I display elements 1 to 24 in page 1 and elements 19 to 42 in the second page- Meaning I need an overlapping of elements across these 2 pages.

The html code implemented is as follows:

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

For the above: pageSize=24, currentPage=0 (Changed to 1 when Next is clicked)

The JS code to do the same is as follows(Followed this fiddle: 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);
                    }
             }
        });

解决方案

Using a function in the startFrom: filter, you are able to control the display of the last page in the data set. This keeps your result display size consistent and gives you the overlap of data you are requiring.

Updated fiddle: 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;
   }
}

这篇关于使用Angular JS进行自定义分页 - 需要在第一页中显示div元素，在第二页上单击Next时应该重复该元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！