ui-bootstrap分页在初始化时重新设置当前页

I am using the pagination directive from the ui-bootstrap (angular-bootstrap) library. I am having an issue when it initializes. My issue occurs when I navigate to a specific page via url.

我使用ui-bootstrap (angular-bootstrap)库中的分页指令。当它初始化时，我有一个问题。当我通过url导航到特定的页面时，就会出现问题。

What is happening is that my controller initializes with the correct page from $stateParams, then the pagination directive initializes and triggers the ng-change function which is resetting the page to 1. Now that on-select-page is no longer used, is there a way to only capture user clicks to change the page? Ideally I would like the directive to initialize before the controller so that my page does not get reset. Thank you in advance.

所发生的情况是，我的控制器使用$stateParams中正确的页面初始化，然后pagination指令初始化并触发将页面重置为1的ng-change函数。既然已经不再使用on-select-page，是否有一种方法可以只捕获用户点击来更改页面?理想情况下，我希望指令在控制器之前初始化，这样我的页面就不会被重置。提前谢谢你。

I can include code if needed, but I feel my question does not necessarily require a code block.

如果需要的话，我可以包含代码，但是我觉得我的问题不一定需要代码块。

6 个解决方案

#1

So I found a solution after drilling down into the angular-bootstrap code. Their code has a watch on totalPages that checks if the current page is greater than the totalPages value.

所以我在深入探究了angular-bootstrap代码之后找到了一个解决方案。它们的代码在totalPages上有一个监视，该监视检查当前页是否大于totalPages值。

angular-bootstrap code:

angular-bootstrap代码:

if ( $scope.page > value ) {
  $scope.selectPage(value);
} else {
  ngModelCtrl.$render();
}

What was happening was if I refreshed the page on page 3 (for example) my controller was reloading the items for that page temporarily causing total-items to be 0 and totalPages to be calculated as 1. This triggered the watch and the above code.

发生的情况是，如果我刷新了第3页上的页面(例如)，我的控制器将重新加载该页上的项，从而导致total-items为0,totalpage计算为1。这触发了手表和上面的代码。

My solution was to load the items in the state resolve so that total-items (and in turn totalPages) would always be accurate.

我的解决方案是在状态解析中加载项，以便总项(以及相应的totalpage)总是准确的。

#2

If you don't want to use state resolve the data then you could just add a ng-if directive on paginator. Assuming $scope.total_count is used to bind to total-items attribute, you can do something like the following:

如果您不想使用状态解析数据，那么可以在paginator中添加一个ng-if指令。假设美元范围。total_count用于绑定到totalitems属性，您可以执行以下操作:

<pagination data-ng-if="total_count"
            total-items="total_count"
            ng-model="applied_filters.page"
            max-size="maxSize"
            class="pagination-sm"
            boundary-links="true"
            rotate="false"
            class="nomargin"
            num-pages="numPages"></pagination>

This way the directive is always initialized when you have total count from the server & currentPage will not be greater than totalPages

这样，当您从服务器获得总计数时，指令总是被初始化，并且当前页不会大于totalpage

#3

The ng-if directive didn't work for me as expected (I didn't use the controllerAs syntax): the pagination wasn't able to update the $scope.currentPage variable anymore. The solution was to use ng-model="$parent.currentPage" instead of ng-model="currentPage".

ng-if指令没有像预期的那样对我起作用(我没有使用controllerAs语法):分页不能更新$scope。当前页变量了。解决方案是使用ng-model=“$parent”。当前页”而不是ng-model = "当前页”。

<uib-pagination ng-if="totalItems"
                total-items="totalItems"
                items-per-page="itemsPerPage"
                ng-model="$parent.currentPage">
</uib-pagination>

#4

A solution to this problem I've found from Github and implemented and worked perfectly.

我从Github上找到了一个解决这个问题的方法，并得到了很好的实现和工作。

As mentioned in other answers also, the issue is with totalItems and when I try to move to page 2/3/n, totalItems becomes 0 for a moment and in the process, currentPage value becomes 1 and I can't move to my desired page. So my trick is, before I call the data from server, I just set a bigger number as totalItems and after I receive data from server, I update totalItems.

正如在其他答案中提到的，问题是关于totalItems的，当我试图移动到第2/3/n页时，totalItems暂时变为0，在此过程中，currentPage值变为1，我无法移动到我想要的页面。我的诀窍是，在我从服务器调用数据之前，我只是将一个较大的数字设置为totalItems，在我从服务器接收数据之后，我更新totalItems。

$scope.totalItems = 1000;
QuotationService.getQuotations(url).then(function ( response ) {

     $scope.totalItems = response.data.total;
     $scope.quotations = response.data.data;
     $scope.isTableLoading = false;

});

In my view, only if isTableLoading is false, I show the Pagination, otherwise pagination will show a wrong number of pages.

在我看来，只有当isTableLoading是假的，我才会显示分页，否则分页将显示错误的页数。

<div class="text-center" ng-show="isTableLoading == false">
     <uib-pagination boundary-links="true"  
           total-items="totalItems"
           items-per-page="15" max-size="15" ng-model="currentPage"
           class="pagination-sm" previous-text="&lsaquo;"
           next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">
     </uib-pagination>
</div>

Now everything working perfectly.

现在一切都完美的工作。

#5

If you are looking to set the page when the page loads, then just load up the model as it describes here.

如果您希望在页面加载时设置页面，那么只需按这里描述的那样加载模型。

From the website:

从网站:

<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()">
</pagination>

I'm sure you've already looked there, so if the model is not being set properly upon the initialization of the controller then you're obviously going to have problems. There is also the case where it is possibly being overwritten in another place where you are using $scope.currentPage. Although you may feel it is easier without code, I would suggest posting the HTML and Angular Controller you are referring to. Hope it helps!

我相信你们已经看过了，如果在控制器初始化时模型没有被正确设置，那么很明显你们会遇到问题。在另一个使用$scope.currentPage的地方，它可能被覆盖。虽然您可能觉得没有代码会更容易，但我建议您发布您所指的HTML和角控制器。希望它可以帮助!

#6

An alternative to the state resolve would be to set the total-items in a value module once known. Same dealio, actually I just wanted to comment on your above answer, but I didn't have the points necessary. Thanks for the explanation, helped me out!

对状态解析的另一种选择是在已知的值模块中设置total-items。同样的dealio，实际上我只是想评论一下你的答案，但是我没有必要的要点。谢谢你的解释，帮了我的忙!

#1