Returning to the proper page when using AngularJS UI Bootstrap pagination

Question

I'm trying to understand how to go about returning to the proper page of a paginated list of items using AngularJS UI Bootstrap's pagination.

I've got my items properly paginated (12 to a page) and the pagination filter works (page 1 = 1-12, page 2 = 13-24, etc.). I've also created a route to a details template for each item, and that works as well.

On the details page I have a button that goes back to the template at the root of the app ("/"), named "Return to catalog," which is page 1 of the list of items. However, this button goes back to page 1 even for the details of item 24. What I'd like it to do is go to page 2, where item 24 is paginated, and page 3 if the details shown are for any item between 25-36, and so on.

Please advise on how to go about doing something like this.

Answer 1

You can use Pagination service for this case.

For example:

app.service('PaginationService', function(){
   var service = {};
   service.currentPageNumber = 1;

   service.setNewPageNumber = function(newPageNumber) {
      service.currentPageNumber = newPageNumber;
   };

   return service;
});

app.controller('CatalogController', function($scope, PaginationService){
   $scope.currentPage = PaginationService.currentPageNumber;
   $scope.totalItems = 0;
   $scope.itemsPerPage = 10;

   $scope.setPage = function (pageNo) {
      $scope.currentPage = pageNo;
   };

   $scope.$watch('currentPage', function () {
      PaginationService.setNewPageNumber($scope.currentPage);
   });
});

Every time when you change current page number, PaginationService.setNewPageNumber() will be called and after return from details page, controller will be reloaded and you will have actual page number from the service.

$scope.currentPage = PaginationService.currentPageNumber;

Hope it helps!

Answer 2

When you route from one page to another you need to store the current page number. On click of back button when you route back to the current page set the ng-model of the to previous value.

Storing current page number on page route: call the function in ng-change

$scope.pageChanged = function(pageNo) {
  $rootScope.SavedCurrentPage = pageNo;
};

Set the previously stored pageNumber : Important thing to remember here is to set the page number after items are retrieved by the service call. If not , page number would be defaulted to 1

.....getData().then(function(result) {
    if ($rootScope.SavedCurrentPage) {
    $scope.bigCurrentPage = $rootScope.SavedCurrentPage;
  } else {
    $scope.bigCurrentPage = 1;
  }
});