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

Question

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

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

这是我的控制器

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

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

Answer 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

Answer 2

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

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

Fork JSFiddle from @sheilak

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

ui-bootstrap pagination items-per-page not changing page size

pagination

angularjs

angular-ui-bootstrap