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

Question

我正在使用 ui-bootstrap (angular-bootstrap) 库中的分页指令。我在初始化时遇到问题。当我通过 url 导航到特定页面时出现问题。

发生的事情是我的控制器使用 $stateParams 中的正确页面进行初始化，然后分页指令初始化并触发 ng-change 函数，该函数将页面重置为 1。现在 on-select -page 现在不用了，有没有办法只捕获用户点击更改页面？理想情况下，我希望指令在控制器之前初始化，这样我的页面就不会被重置。提前谢谢你。

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

Answer 1

如果您希望在页面加载时设置页面，then just load up the model as it describes here.

来自网站：

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

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

Answer 2

所以我在深入研究 angular-bootstrap 代码后找到了解决方案。他们的代码在 totalPages 上有一个手表，检查当前页面是否大于 totalPages 值。

angular-bootstrap代码：

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

发生的事情是，如果我刷新第 3 页上的页面（例如），我的控制器会暂时重新加载该页面的项目，导致项目总数为 0 并且 totalPages 计算为 1。这触发了手表和上面的代码。

我的解决方案是加载 state resolve 中的项目，以便项目总数（以及总页数）始终准确。

Answer 3

状态解析的替代方法是在已知的值模块中设置总项目。同样的dealio，其实我只是想评论你上面的答案，但我没有必要的观点。感谢您的解释，帮了我大忙！

Answer 4

如果您不想使用状态解析数据，那么您可以在分页器上添加一个 ng-if 指令。假设 $scope.total_count 用于绑定到 total-items 属性，您可以执行以下操作：

<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>

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

Answer 5

ng-if 指令对我没有预期的效果（我没有使用 controllerAs 语法）：分页无法更新 $scope.currentPage 变量了。解决方案是使用 ng-model="$parent.currentPage" 而不是 ng-model="currentPage"。

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

Answer 6

我从 Github 找到了这个问题的解决方案，并且实施并完美运行。

正如其他答案中提到的，问题出在 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;

});

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

<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>

现在一切正常。

Answer 7

只是添加另一种最简单的方法来解决问题。 1. 首先，将查询参数传递给您的 URL（以便更清楚地了解您当前所在的页面）。为此，请将这行代码添加到您在 (pageChange) 上运行的函数中。即 (pageChange)="getAllData(page)"

this.router.navigate(['/Advertisement'], { queryParams: { page: page }});

2. 其次，获取查询参数并将参数分配给 page 变量。即

this.route.queryParamMap.subscribe((params:any) => { this.page = +params.get('page')});

我的HTML <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="getAdvertisements(page)">

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

ui-bootstrap pagination resetting current page on initialization

pagination

angularjs

angular-ui-bootstrap