仅使用angularjs上所有页面的数组进行分页

时间:2017-03-27 13:30:23

标签: javascript html angularjs pagination

我一直试图使用angularjs进行分页。我设法将所有页码都放在一个数组中,但我不确定如何使用“下一步”和“后退”按钮一次只能查看10个页面。

到目前为止,我有一个所有页面的数组,我想在每个页面上显示的所有记录的总数(每页30个)。像这样:

$scope.showPagingSequence = function () {
        if ($scope.showNumberPagingStats) {
            if ($scope.PageNum < $scope.dynamicReport.PageCount) {
                for (var i = 1; i <= $scope.dynamicReport.PageCount; i++) {
                    $scope.PageNumbers.push(i);
                }
            } 
        }
  }

这是我在html中实现的方式,

<div ng-model="showPagingSequence()">
                <ul class="pagination" ng-repeat="pages in PageNumbers">
                    <li><a href="#" ng-click="setPageNumber(pages)">        {{pages}}</a></li>
                </ul>
</div>

如何将我的分页限制为仅使用“下一步”和“后退”按钮查看有限数量的页面?

1 个答案:

答案 0 :(得分:0)

查看UI Bootstrap的分页指令。我最终使用它而不是这里发布的内容,因为它具有足够的功能供我当前使用,并且有一个完整的测试规范可以随之附带。实施例

<pagination 
 ng-model="currentPage"
 total-items="todos.length"
 max-size="maxSize"  
 boundary-links="true">
</pagination>

JS

todos.controller("TodoController", function($scope) {
 $scope.filteredTodos = []
   ,$scope.currentPage = 1
   ,$scope.numPerPage = 10
   ,$scope.maxSize = 5;

 $scope.makeTodos = function() {
   $scope.todos = [];
   for (i=1;i<=$scope.dynamicReport.PageCount;i++) {
     $scope.todos.push({ text:"todo "+i, done:false});
   }
 };
 $scope.makeTodos(); 

 $scope.$watch("currentPage + numPerPage", function() {
   var begin = (($scope.currentPage - 1) * $scope.numPerPage)
   , end = begin + $scope.numPerPage;

 $scope.filteredTodos = $scope.todos.slice(begin, end);
});
});

请参阅this链接以获取更多说明