Question

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

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

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

Answer 1

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

angular-bootstrap代码：

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

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

我的解决方案是在状态解析中加载项目，以便总项目（以及totalPages）始终准确。

Answer 2

如果您不想使用state解析数据，那么您只需在paginator上添加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>用于绑定{{1}}属性，您可以执行以下操作：

{{1}}

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

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

Answer 4

我从Github找到的这个问题的解决方案，实现并完美地工作。

正如其他答案所述，问题出在totalItems，当我尝试转到第2/3页/ n时，totalItems暂时变为0，在此过程中currentPage 1}}值变为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 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 Controller。希望它有所帮助！

Answer 6

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

Answer 7

只需添加另一种最简单的方法来解决问题。 1. 首先，将查询参数传递给您的网址（以便更了解您当前所在的页面）。为此，请将这行代码添加到在 (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分页在初始化时重置当前页面

7 个答案: