AngularJS分页页码样式

Question

我尝试使用此http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js脚本（对于我想要的结果）进行创建，并且效果很好。但是由于某种原因，它会以我的uib-typeahead崩溃，因此我不得不求助于我当前使用的那个。有解决方法吗？预先感谢您的帮助！

这是我想要的结果

这就是我目前拥有的

我的HTML：

<div class="pagingDiv">
<button class="btnPaging" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
</button>
</div>

Javascript：

                 $scope.currentPage = 0;
                 $scope.pageSize = 4;
                 $scope.data = [];
                 $scope.numberOfPages=function(){
                     return Math.ceil($scope.data.length/$scope.pageSize);
                 }
                 for (var i=0; i < $scope.displayPage.length; i++) {
                     $scope.data.push("Item "+ i);
                 }


    myApp.filter('startFrom', function() {
return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
}
});

Answer 1

您必须重复使用numberOfPages()直到返回。创建一个按钮并使用ng-repeat，如下所示：

<div class="pagingDiv">
<button class="btnPaging" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
<button ng-repeat="page in numberOfPages()">{{page}}</button>
<button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
</button>
</div>

Answer 2

我建议不要重新设计分页。

在我的项目中，我正在使用以下库：

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

它不再处于维护状态，但仍然可以工作。

我认为，即使是默认模板也可以满足您的要求（请查看其演示）。最重要的是，您可以指定自己的控件模板并享受有效的分页逻辑。

Answer 3

ngTable是一个非常好的分页（以及过滤和排序）库，可以快速，轻松地实现，这是一个链接：

NPM Link

API and short tutorial

也可以使用引导程序进行更改。