Angular UI Bootstrap – 分页指令
原文链接:https://www.f2er.com/angularjs/147611.html查看UI Bootstrap的pagination directive.我最终使用它,而不是什么是张贴在这里,因为它有足够的功能,我目前的使用,并有一个thorough test spec伴随它。
视图
<!-- table here --> <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true"> </pagination> <!-- items/page select here if you like -->
控制器
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<=1000;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); }); });
我做了一个working plunker供参考。
旧版本:
视图
<!-- table here --> <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div> <!-- items/page select here if you like -->
控制器
todos.controller("TodoController",done:false}); } }; $scope.makeTodos(); $scope.numPages = function () { return Math.ceil($scope.todos.length / $scope.numPerPage); }; $scope.$watch("currentPage + numPerPage",end); }); });
我做了一个working plunker供参考。