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连结

API和简短教程

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