Angularjs 每页的ui引导分页项目不更改页面大小

我讨厌问这个问题，因为似乎所有的分页问题都得到了回答。但是，我不明白是什么使分页页面变短。我相信我的例子与其他例子非常相似

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

这是我的控制器

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英镑

这种重复很简单

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

---

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

分页指令提供了一种方法，可以根据数据大小和其他参数向用户显示可选页面列表，并允许用户轻松控制当前页面

它实际上并不为您过滤数据。您仍然必须在

ng repeat

中应用

itemsPerPage

、

currentPage

等

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

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

然后将其与Limito一起使用以控制分页

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

{{country.name}

---

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

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