AngularJS UI Bootstrap 分页控制关闭一页答案

【问题标题】：AngularJS UI Bootstrap pagination control off by one pageAngularJS UI Bootstrap 分页控制关闭一页
【发布时间】：2016-05-15 12:36:24
【问题描述】：

我正在尝试让 Angular UI Boostrap 分页控件与由 Web api 控制器填充的表格一起使用。

我有一个用于分页控件的指令：

app.filter('pagination', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    };
});

我的角度控制器中有以下内容：

$scope.currentPage = 0;
// max items per page
$scope.pageSize = 10;
// number of pagination buttons to display
$scope.numberButtons = 5;
// total items in the array
$scope.totalItems = 0;
// number of pages
$scope.numberPages = 0

在视图中，我有以下内容（为简洁起见被截断）：

...
    <tr data-ng-repeat="assetType in assetTypes | filter:searchFilter 
        | pagination: currentPage * pageSize | limitTo: pageSize 
        | orderBy:sortType:sortReverse">
        <td><a href="#/asset-type-details/{{assetType.AssetTypeId}}">{{ assetType.AssetTypeId }}</a></td>-->
        <td>{{ assetType.AssetTypeName }}</td>
        <td>{{ assetType.Active | yesNo }}</td>
    </tr>
</table>
<uib-pagination ng-show="totalItems" total-items="totalItems" max-size="numberButtons" ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

我遇到的问题是当视图最初出现时，一切都很好。前 10 个项目（按 Id 排序）按预期以 Ids 1-10（例如）开头。但是，当我离开第一页然后导航回第一页时，我得到的项目是 11-20 而不是 1-10。

当我使用自定义寻呼机控件时，顶部的角度过滤器可以正常工作，但是当您离开第一页时，角度 ui 似乎不在一个页面上。

此外，项目数 ($scope.totalItems) 和页数 ($scope.numberPages) 正在我的控制器方法中设置，此处未表示。

感谢任何帮助

编辑：我注意到的另一件事是，当我导航到最后一页时，它不返回任何数据，因此分页的整个范围似乎偏离了一个。

编辑 2： 好的，看来我已经成功了。我不得不将当前页面设置为 1 而不是 0：

$scope.currentPage = 1;

然后将我的分页控件更改为减1（currentPage-1）：

<tr data-ng-repeat="assetType in assetTypes | filter:searchFilter 
    | pagination: (currentPage-1) * pageSize | limitTo: pageSize 
    | orderBy:sortType:sortReverse">

如果这被证明是正确的，我会在允许时将其发布为答案。

【问题讨论】：

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

正如我原来的帖子所说，我必须将当前页面设置为 1 而不是 0：

$scope.currentPage = 1;

然后将我的分页控件更改为减1（currentPage-1）：

<tr data-ng-repeat="assetType in assetTypes | filter:searchFilter 
    | pagination: (currentPage-1) * pageSize | limitTo: pageSize 
    | orderBy:sortType:sortReverse">

【讨论】：