使用AngularJS UI引导分页时返回到正确的页面

Question

我正在尝试理解如何使用AngularJS UI Bootstrap的分页返回到项目分页列表的正确页面。

我已经正确地对我的项目进行了分页(每页12个)，并且分页过滤器工作正常(第1页= 1-12，第2页= 13-24，等等)。我还为每个项目创建了一个指向详细信息模板的路由，这也是可行的。

在详细信息页面上，我有一个返回到应用程序根目录("/")的模板的按钮，名为"Return to catalog“，这是项目列表的第1页。但是，此按钮会返回到第1页，即使是项目24的详细信息也是如此。我想要它做的是转到第2页，其中第24项是分页的，如果显示的详细信息是25-36之间的任何项，则第3页，依此类推。

请建议如何去做这样的事情。

Answer 1

对于这种情况，您可以使用Pagination service。

例如：

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

当您从一个页面路由到另一个页面时，您需要存储当前页码。在返回当前页面时单击back按钮，将的ng-model设置为上一个值。

在页面路由上存储当前页码:调用ng-change中的函数

​

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

​

设置以前存储的pageNumber :这里要记住的重要一点是，在服务调用检索到项目之后设置页码。否则，页码将默认为1

​

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

​

Answer 3

mean.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();
    }