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
– dip, Commented Jun 24, 2014 at 18:43
You should answer your own question or delete this question. — simeg
– simeg, Commented Dec 14, 2014 at 9:45

Anirudh Bhardwaj · Accepted Answer · 2016-09-27 09:48:47Z

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

Collectives™ on Stack Overflow

Angular UI Bootstrap pagination not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related