Returning to the correct page when using Bootstrap AngularJS UI pagination

Question

I am trying to figure out how to get back to the correct page of a paginated list of items using the Bootstrap page splitting in AngularJS.

I have my items correctly paginated (12 per page), and the pagination filter works (p. 1 = 1-12, p. 2 = 13-24, etc.). I also created a route to the parts template for each item, and this also works.

On the details page, I have a button that returns to the template in the root directory of the application ("/") with the name "Return to Directory", which is page 1 of the list of items. However, this button will return to page 1 even for the details of element 24. What I need to do is go to page 2, where element 24 is paginated, and on page 3, if the specified details are specified for any element between 25 -36 and t .d.

Please advise how to do this.

Answer 1

You can use Pagination servicefor this occasion.

For instance:

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);
   });
});

, , PaginationService.setNewPageNumber() , , .

$scope.currentPage = PaginationService.currentPageNumber;

, !

Answer 2

. "" ng- .

: ng-change

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

Hide result

. , , . , 1

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

Hide result

Answer 3

.js

------------ yo meanjs:angular-service <service-name>------------
    (function () {
  'use strict';

  angular
    .module('lista')
    .factory('listaService', listaService);

  listaService.$inject = [/*Example: '$state', '$window' */];

  function listaService(/*Example: $state, $window */) {
    // Pagin service logic
    // ...
    var service = {};
       service.currentPageNumber = 1;
       service.setNewPageNumber = function(newPageNumber) {
         if(newPageNumber>1){
      service.currentPageNumber = newPageNumber;
      }
   };

    // Public API
    return service;
  }
})();
------------------------controller-------------------------------
function buildPager() {
      vm.pagedItems = [];
      vm.itemsPerPage = 10;


       vm.currentPage = listaService.currentPageNumber;
       $scope.$watch('vm.currentPage',function(o,n){
          console.log('current page changed to');
          console.log(o);
         listaService.setNewPageNumber(o);
        });

           vm.figureOutItemsToDisplay();
    }

Answer 4

, - URL-. , URL- . , URL-, .

:

http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/

, :

$stateProvider.state('list', {
  url: '/list?page',
  controller: 'ListCtrl',
  controllerAs: 'list',
  templateUrl: 'list.html',
  params: {
    page: {
      value: '1',
      squash: true
    }
  }
});

• page, :

angular
  .module('your.module')
  .controller('ListCtrl', function ($state, $stateParams) {
    var vm = this;
    vm.page = parseInt($stateParams.page || '1'); // page param is a String
    loadStuffForList(); //First time load elements for list

    vm.onPageChange = function () {
      $state.go('.', {'page': '' + vm.page}, {'notify': false}); // notify: false -> prevent the controller from reloading
      loadStuffForList();
    };
    function loadStuffForList () {...};
  });

• As for the Back button , if you do not want the user to use the browser button Back , I would do something like this:

<a ui-sref="list({page: vm.thisItemPage})">Back</a>