Angular UI Bootstrap pagination not working

Question

I am using ui-Bootstrap pagination but its not working as expected I refer following post but its not working for me.

How do I tell ui-Bootstrap what content to paginate?

My code is as follows.

<div>
  <ul>
     <li ng-repeat= "payment in paymentHistory">
        <div >
          <div > 
            <p >payment.status</p> 
           </div>
           <div>
              <p >payment.cost</p>
           </div>
        </div>
      </li>
    </ul>
 </div>
 <div ng-show="pagination"> <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination></div>

My controller code:

paymentFactory.getPaymentHistory( )
.success(function (paymentHisInfo) {
     for(var i = 0; i< paymentHisInfo.list.length; i++){
      $scope.paymentHistory.push({
     "status":paymentHisInfo.list[i].status,
              "cost":paymentHisInfo.list[i].cost});
       }
       $scope.list = $scope.paymentHistory;
       $scope.itemsPerPage = 5;
       $scope.currentPage = 1;
           $scope.pageCount=Math.ceil($scope.list.length / $scope.itemsPerPage);
       $scope.list.$promise.then(function () {
      $scope.totalItems = $scope.list.length;

        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;
                $scope.paymentHistory = $scope.list.slice(begin, end);
      });

    })
    .error(function(){
        console.log("error occured in getPaymentHistory");
    });
Please let me know whats wrong in my code

Its my bad..There was type in my code. I updated code which works fine. — dip, Jun 24 '14 at 18:43
You should answer your own question or delete this question. — simeg, Dec 14 '14 at 09:45

score 1 · Answer 1 · answered Sep 27 '16 at 09:48

This might help.

UIB Pagination is lightweight pagination directive that helps us to paginate our web project. To use Angular UI bootstrap pagination we can get the code form here https://angular-ui.github.io/bootstrap/ and can use in our project. To use we have HTML snippet to add in our project.

<pagination boundary-links="true" max-size="maxSize" ng-change="pageChanged()" ng-model="currentPage" total-items="totalPages">  </pagination>
angular.module('myModule', ['ui.bootstrap']);
 .controller('myCtrl', ['$scope',    function ($scope) {
     $scope.maxSize = 5;
     $scope.currentPage = 1;
     $scope.totalPages = 20;

   $scope.pageChanged = function () {
        // operation to perform on page changed
        console.log("Hi I am on ",($scope.currentPage-1),"page")
    };
  }])

1) The maxSize is number page navigator on a page.

2) The currentPage is active page in HTML specified by ng-model.

3) The totalPages is number of all the pages.

4) boundary-links is used to display. First and last page button and by default it is false.

4) ng-change call the operation on page change event.

Hope it helps. Thanks, Oodles Technologies

Angular UI Bootstrap pagination not working

1 Answers1