ui-bootstrap pagination items-per-page не меняется размер страницы

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> 

Я получаю обратно 13 вкладок для 250 объектов в массиве. Однако все 250 объектов отображаются. Я ожидаю 20 за страницу.

НГ-повтор ясно

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

Что я мог не быть, что бы связать текущую страницу?

Answer 1

Директива pagination дает вам возможность представить пользователю список выбираемых страниц в зависимости от размера данных и других параметров и позволяет пользователю легко управлять текущей страницей.

Он фактически не фильтрует данные для вас. Вам все равно придется применять itemsPerPage, currentPage и т. Д. В пределах вашего ng-repeat.

Один из способов сделать это, чтобы добавить дополнительный фильтр, чтобы помочь пропуская

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