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

时间:2015-10-20 19:24:42

标签: javascript html css angularjs

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

  2. 我的问题是如何在第1页中显示元素1到24,在第二页中显示元素19到42-意思是我需要在这2页中重叠元素。

  3. 实施的html代码如下:

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

    对于上述内容: 的pageSize = 24, currentPage = 0(单击“下一步”时更改为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);
                        }
                 }
            });
    

    First 24 Items Next 18 items

1 个答案:

答案 0 :(得分: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;
   }
}