Pagination not working AngularJS 1.4 with ui-bootstrap

Question

Here's what I currently have (I've also tried numerous things from other SO answers and tutorials to no avail):

simpleImageReview.js:

var app = angular.module("simpleImageReview", ['ui.bootstrap']);

imgViewerCtrl.js:

app.controller("imgViewerCtrl", function($scope, $http) {
    $scope.imgList = [];
    $http.get("http://127.0.0.1:5000/api/file_metadata").success(
        function(data, status, headers, config) {
            $scope.data = data;
            $scope.totalImgs = $scope.data.num_results;
            $scope.totalPages = $scope.data.total_pages;
            $scope.currentPage = $scope.data.page;
            $scope.imgList = $scope.data.objects;
            $scope.imgsPerPage = 10;
        });
});

index.html (stripped down):

... header, imports, etc. - no issues with this

<body ng-app="simpleImageReview">
<div ng-controller="imgViewerCtrl">
    <ul>
        <li>
            <li ng-repeat="img in imgList">
                <img src="{{img.local_path}}" border="0" width="153" height="204">
        </li>
    </ul>

    <pagination 
        total-items="totalImgs" 
        items-per-page="imgsPerPage" 
        ng-model="currentPage" 
        max-size="totalPages" 
        class="pagination-sm" 
        boundary-links="true">
    </pagination>
</div>
</body>

... footer, more imports - no issues with this

The images display fine so the API is working as intended. Clicking on the next page does nothing. I imagine I somehow need to update the view but am not sure how to go about this.

What am I doing wrong?

score 1 · Answer 1 · answered Jul 08 '15 at 23:55

You need to manually create a new array containing just the subset of objects that are displayed on the current page. You then point your ng-model to this array not the whole data array. So on page load, assuming you want to begin on the first page:

$scope.paginatedList = $scope.imgList.slice(0, $scope.imgsPerPage);

You also need to use an ng-change directive on the pagination directive which you can use to update the paginatedList when the $scope.currentPage changes.

In your HTML...

<pagination 
            ng-change="pageChanged()"
            total-items="totalImgs" 
            items-per-page="imgsPerPage" 
            ng-model="currentPage" 
            max-size="totalPages" 
            class="pagination-sm" 
            boundary-links="true">
    </pagination>

In your controller...

$scope.paginatedList = $scope.imgList.slice(0, $scope.imgsPerPage);

function pageChanged(){

      var begin = (($scope.currentPage - 1) * $scope.imgsPerPage),
          end   = begin + $scope.imgsPerPage;

      $scope.paginatedList = $scope.imgList.slice(begin, end);

}

Here is a working plunker

While this example works nice with the test data, the pagination is occurring server side for me so another call needs to be made to the API with the updated page number to get the next page. I've found lots of examples like this that work with local data, but nothing with an API showing how to actually call for the next page (`api_url?page=2`). — Dan, Jul 09 '15 at 03:44
Could you not make the $http call in the pageChanged function? I don't think there is a build in ajax call in the pagination directive if that's what you mean, you would need to manually call the $http service each time the page changes. — Matt Herbstritt, Jul 09 '15 at 07:03
I tried making the GET part of a load method and calling it during pagination but that also failed. I've since come to realize it must be a service: http://stackoverflow.com/questions/13937318/convert-angular-http-get-function-to-a-service — Dan, Jul 09 '15 at 07:11

Pagination not working AngularJS 1.4 with ui-bootstrap

1 Answers1