ui-bootstrap 分页项-每页不改变页面大小答案

【问题标题】：ui-bootstrap pagination items-per-page not changing page sizeui-bootstrap 分页项-每页不改变页面大小
【发布时间】：2026-01-27 12:45:01
【问题描述】：

我讨厌问这个问题，因为似乎所有分页问题都已得到解答。但是，我不遵循使分页页面缩短的原因。我相信我的示例与其他示例非常相似。

我得到了正确数量的选项卡，当前页面也在正确更改。但是，长度与分配的每页项目数限制不匹配。

这是我的控制器

viewsModule.controller('CountryCtrl', ['$scope', 'cacCountries', function($scope, cacCountries) {

$scope.loading = true;
$scope.countries = [];
$scope.currentPage = 1;
$scope.itemsPerPage = 20;
$scope.maxSize = 20;

cacCountries().then(function(countries) {
    // console.log(countries);
    $scope.loading = false;
    $scope.countries = countries;
    $scope.totalItems = countries.length;

});

}]);

我已将 itemsPerPage 设置为 20

在我的 html 中，我确保引用 itemsPerPage

<pagination  
        total-items="totalItems" 
        items-per-page= "itemsPerPage"
        ng-model="currentPage" 
        class="pagination-sm">
</pagination>

我正在为数组中的 250 个对象返回 13 个选项卡。但是，所有 250 个对象都出现了。我预计每页 20 个。

ng-repeat 很简单

<tr ng-repeat="country in countries |filter:search ">

我会缺少什么来绑定当前页面？

【问题讨论】：

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

分页指令让您可以根据数据大小和其他参数向用户呈现可选页面列表，并让用户轻松控制当前页面。

它实际上并没有为您过滤数据。您仍然需要在您的ng-repeat 中应用itemsPerPage、currentPage 等。

一种方法是添加一个额外的过滤器来帮助跳过

app.filter('offset', function() {
    return function(input, start) {
        return input.slice(start);
    };
})

然后用这个和limitTo来控制分页

<div ng-repeat="country in countries | filter:search | offset: (currentPage - 1) * itemsPerPage | limitTo:itemsPerPage"> 
    {{country.name}}
</div>

JSFiddle here

【讨论】：

【解决方案2】：

老问题..但值得用简单的方法回答。

<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) ">

Fork JSFiddle from @sheilak

【讨论】：