Angularjs pagination page number styling

Question

I have tried creating using this http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js script ( For the result I want ) and it works well. But for some reason it crashes with my uib-typeahead, so I have to resort to the one I am currently using. Is there a workaround? Thanks in advance for the help!

This is the result I want

And this is what I currently have

my 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

You have to use repeat till what numberOfPages() return. Create a button and use ng-repeat like following:

<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

I'd suggest not to re-invent the paging.

In my projects I was using following library:

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

It is not in maintained state anymore, but still works.

I think, even default template will do what you want (check their demo). On top of that, you can specify your own controls template and enjoy a working pagination logic.

Answer 3

A great library for pagination (as well as filtering and sorting) which is implemented very quickly and easily is ngTable, here's a link:

NPM Link

API and short tutorial

Can also be changed with bootstrap.