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

Posted 2023-03-10

【中文标题】ui-bootstrap 分页在初始化时重置当前页面

【英文标题】：ui-bootstrap pagination resetting current page on initialization

【发布时间】：2015-03-10 19:04:42

【问题描述】：

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

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

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

【参考方案1】：

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

角度引导代码：

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

如果我刷新第 3 页上的页面（例如），我的控制器正在重新加载该页面的项目，导致 total-items 为 0，totalPages 被计算为 1。这触发了手表和以上代码。

我的解决方案是加载状态为 resolve 的项目，以便总项目（进而总页数）始终准确。

【讨论】：

救命稻草。谢谢！

您好，我也有同样的情况。我不明白你所说的“国家决心”是什么意思。请问，你能解释一下吗？

@wildbyte - ui 路由器有一个解析函数，该函数在状态加载之前运行并完成。这允许您在加载状态控制器或指令之前设置值。

非常感谢，你真的拯救了我的一天 :)

感谢您的发现。这很有帮助。干杯:)

【参考方案2】：

如果您不想使用状态解析数据，那么您可以在分页器上添加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>

这样，当您从服务器获得总计数并且 currentPage 不会大于 totalPages 时，该指令始终会被初始化

【讨论】：

你也可以把ng-if="total_count"放在分页标签上。

谢谢！我认为它是更好的解决方案。

谢谢老兄，在我挠了一段时间之后，这对我有很大帮助。

【参考方案3】：

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>

【参考方案4】：

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

现在一切正常。

【参考方案5】：

如果您希望在页面加载时设置页面，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 控制器。希望对您有所帮助！

【讨论】：

感谢您的回答；但是，我的指令是这样设置的。如果您在下面看到我的解决方案，我的问题是控制器将 totalItems 初始化为 0（在等待 api 响应时）并触发 $scope.$watch 重置 currentPage。

【参考方案6】：

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

【参考方案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)">