Angularjs pagination in ng-repeat

Question

In my controller I have following code that gets data from the database.

 $scope.noOfPages = 0;
    $scope.currentPage = 1;
    $scope.maxSize = 5;
 $scope.tickets = TicRepository.getTics.query({ id: $routeParams.t_id }, function (data) {
        $scope.tickets = data.items;
        $scope.noOfPages = data.totalPages,
        $scope.currentPage = data.pages;
    });

And in my html I have

 <div>
    div>
        {{noOfPages}} &nbsp; {{currentPage}} &nbsp; {{maxSize}}
        <pagination num-pages="noOfPages" current-page="currentPage"></pagination>
    </div>
     <div ng-repeat="tics in tickets " >
          ................
     </div>
  </div>

I get the data fine but pagination is not working. In pagination buttons it just shows 1 page and lists all items. Please let me know how to fix this problem. Thanks

Can you post a fiddle or plunker? Hard to tell without seeing your directive too. — Zack Argyle, May 05 '14 at 03:11

score 4 · Accepted Answer · edited May 23 '17 at 11:59

It looks like you are using ui.bootstrap.pagination. The pagination directive keeps track of the current page, but you still have to filter your array. One solution is to ng-repeat over a subset of the array:

<pagination ng-model="currentPage" total-items="tickets.length" items-per-page="5"></pagination>
<div class="alert alert-info" ng-repeat="tic in paged.tickets">
  {{tic}}
</div>

and then update that subset whenever the current page changes:

$scope.$watch('currentPage', function() {
  var begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
  var end = begin + $scope.itemsPerPage;

  $scope.paged = {
    tickets: $scope.tickets.slice(begin, end)
  }
});

Here is a working demo: http://plnkr.co/edit/oFuE6vjI6t0AHhSVt6Gt?p=preview

Some other (more sophisticated) options are covered in this related question: Pagination on a list using ng-repeat

score 0 · Answer 2 · answered May 05 '14 at 01:06

This is how I implemented it which I hope will be helpful for you as a reference.

JS:

 $scope.RegionPage = 1;
        $scope.RegionRow = 10;
        $scope.RegionRows = [5, 10, 20];

        $scope.GetAttributesByRegion = function (regionFrwdPageButtonClick, regionBckPageButtonClick) {
            if (regionFrwdPageButtonClick) {
                if (($scope.RegionPage + 1) <= $scope.RegionTotalPages) {
                    $scope.RegionPage = $scope.RegionPage + 1;
                }
            }
            if (regionBckPageButtonClick) {
                if ($scope.RegionPage <= 0) {
                    $scope.RegionPage = 1;
                } if ($scope.RegionPage > 1) {
                    $scope.RegionPage = $scope.RegionPage - 1;
                }
            }
            //get all regions
            $http({ method: 'GET', url: '/Admin/GetAttributesByRegion', params: { page: $scope.RegionPage, rows: $scope.RegionRow } }).success(function (data, status) {
                $scope.Regions = data;

                $scope.RegionTotalRecords = 0;
                if (data != null && data != '' && JSON.stringify(data) != '[]') {

                    $scope.RegionTotalPages = parseInt(Math.ceil(data[0].TotalRecords / $scope.RegionRow));
                    $scope.RegionPages = new Array();
                    for (i = 1; i <= $scope.RegionTotalPages; i++) {
                        $scope.RegionPages[i] = i;
                    }
                } else {
                    $scope.RegionTotalPages = 0;
                    $scope.RegionPages = null;
                }


            });
        };

HTML:

<div style="overflow-x: scroll; padding-right: 1px;">
    <table class="table table-condensed" style="font-size: 85%; min-width: 650px;">
        <thead>
            <tr>
                <th>Region</th>
                <th>State</th>
                <th>Neighborhoods</th>
                <th>Locations</th>
                <th>Revenue</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="region in Regions">
                <td>{{region.RegionName}}</td>
                <td>{{region.State}}</td>
                <td>{{region.NeigborhoodCount}}</td>
                <td>{{region.LocationCount}}</td>
                <td>{{region.Revenue}}</td>
                <td>
                    <span class="pull-right">
                        <a href="#regionDetailsModal" data-toggle="modal">Details</a> / 
                        <!-- TODO Aamir Malcolm -- Please integrate link below -->
                        <a href="#addNeighborhoodModal" data-toggle="modal">Add a Neighborhood</a>
                    </span>
                </td>
            </tr>


        </tbody>
    </table>
</div>


<div class="row-fluid">
    <a href="#addRegionModal" class="btn btn-pinkes span3" style="margin-top: 15px;" data-toggle="modal"><i class="icon-plus icon-white"></i>&nbsp;&nbsp;&nbsp;Add new</a>

    <div class="span9 drmc" style="font-size: 85%;">
        <button ng-click="GetAttributesByRegion(false,true)" class="btn btn-mini" id="btnBackwardTop" type="button"><i class="icon-arrow-left"></i></button>
        &nbsp;&nbsp;
        Page&nbsp;
        <select style="width: auto; margin-top: 10px;" ng-change="GetAttributesByRegion(false,false)" ng-model="RegionPage">
            <option ng-repeat="regionPage in RegionPages">{{regionPage}}</option>
        </select>
        &nbsp;of&nbsp; {{RegionTotalPages}}&nbsp;&nbsp;
        <button ng-click="GetAttributesByRegion(true,false)" class="btn btn-mini" id="btnForwardTop" type="button"><i class="icon-arrow-right"></i></button>
        <select style="width: auto; margin-left: 5px; margin-top: 10px;" ng-change="GetAttributesByRegion(false,false)" ng-model="RegionRow">
            <option ng-repeat="regionRow in RegionRows">{{regionRow}}</option>
        </select>
    </div>
</div>

Angularjs pagination in ng-repeat

2 Answers2