Question

下面是我使用angularjs-ui-bootstrap进行简单分页的代码。由于我将处理太大的数据集以使其具有页面客户端，因此我只是在页面更改时每页抓取数据。

我遇到的问题是当重新加载页面时，分页总是重置为第一页。如何在重新加载页面时让它保留在当前页面上？

HTML

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination>

的javascript

    $scope.currentPage = $location.search().page;

    getData($scope.currentPage);

    $scope.pageChanged = function () {
        getData($scope.currentPage);
        $location.url('?page=' + $scope.currentPage);
    };

    function getData(pageNumber) {        
        if (pageNumber == null)
            pageNumber = 1;
        $http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber)
        .success(function (data) {
                $scope.teams = data.Teams;
                $scope.totalCount = data.TotalCount;
            }).error(function () {
            alert("error");
        });

此代码目前向网址添加?page={currentPage}参数。页面重新加载后，$location.search().page保存的页面会进入getData()，$scope.currentPage设置为正确的页码。但随后pageChanged()将$scope.currentPage重置为1。

编辑： Cookie方法

所以我尝试将currentPage保存在这样的cookie中：

    $scope.currentPage = $cookies.get('page');

    getData($scope.currentPage);

    $scope.pageChanged = function () {
        getData($scope.currentPage);
        $cookies.put('page', $scope.currentPage);
    };

当页面重新加载时，从Cookie中保存的页面进入getData()，$scope.currentPage设置为正确的页码。但随后pageChanged()进入$scope.currentPage并重置为1。所以问题仍然存在。

编辑2：

即使$scope.currentPage在重新加载页面时被2硬编码，$scope.currentPage也会重置为1中的$scope.pageChanged。

    $scope.currentPage = 2;

    getData($scope.currentPage);

    $scope.pageChanged = function () {
        getData($scope.currentPage);            
    };

最终编辑：

找到了留在当前页面的方法。答案如下。

Answer 1

您可以使用浏览器中的localStorage保存当前页面，并在需要时稍后获取当前页面。

$scope.currentPage = 1;
localStorage.StoreCurrentPage = $scope.currentPage; 
if(localStorage.StoreCurrentPage){
    $scope.currentPage = localStorage.StoreCurrentPage;
}else{
    $scope.currentPage = 1;
}

Answer 2

当您重新加载网站时，角度也会重新加载并放宽您的范围/上下文。我认为您必须使用当前页面设置一个cookie，并在每次加载应用时检查一个。请参阅：https://docs.angularjs.org/api/ngCookies/service/ $ cookies

Answer 3

如果您使用$ location.search？

，该怎么办？

  $scope.defaultPage = 4;
  $scope.currentPage = $location.search().page || $scope.defaultPage;
  $location.url('/').search({page: $scope.currentPage});

我会将代码更改为：

$scope.defaultPage = 0;
$scope.currentPage = $location.search().page || $scope.defaultPage
$location.url('/').search({page: $scope.currentPage})

$scope.pageChanged = function () {
    getData($scope.currentPage + 1);
    $location.search({page: $scope.currentPage + 1});
};

Answer 4

找出重新加载页面后留在当前页面的方法：

HTML

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination>

的javascript

    $scope.savedCurrentPage = $location.search().page;        
    $scope.currentPage = $scope.savedCurrentPage;

    if ($scope.currentPage == 1) {
        getData($scope.currentPage);
        $scope.savedCurrentPage = null;
    } 

    $scope.pageChanged = function () {
        //Since $scope.currentPage gets reset to 1 here, check if there is a savedCurrentPage.
        if ($scope.savedCurrentPage != null) {
            $scope.currentPage = $scope.savedCurrentPage;
            //Set it to null so it only happens when the page first loads.
            $scope.savedCurrentPage = null;
        }

        getData($scope.currentPage);
        $location.url('?page=' + $scope.currentPage);                
    };

    function getData(pageNumber) {        
        if (pageNumber == null)
            pageNumber = 1;
        $http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber)
        .success(function (data) {
            $scope.teams = data.Teams;
            $scope.totalCount = data.TotalCount;
        })
        .error(function () {
            alert("error");
        });
    }

Answer 5

此处有简短版本;

if(page != null){
        sessionStorage.page = page;
     }

这是我的前端-controller.js的详细信息;

https://gist.github.com/umutyerebakmaz/722949980043d26e35d2166857877641

如何在使用angularjs ui bootstrap分页重新加载后保持当前页面？

5 个答案: