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和簡短教程

也可以使用引導程序進行更改。