如何使用ngrepeat和bootstrap ui使用angularjs创建分页？

什么是最简单的方式来创建分页？我喜欢用ng-repeat来检查项目列表，每个项目都有id和name属性。下一个代码适用于例如15个项目和显示2个页面，但是我想显示第一个页面的前10个项目，另一个页面显示其他项目...等等，如果我有很多项目。如何使用ngrepeat和bootstrap ui使用angularjs创建分页？

我的代码我的尝试：

<table> 
    <thead><th>id</th><th>name</th></thead> 
    <tbody><tr ng-repeat="item in items"> 
     <td>{{item.id}}</td> 
     <td>{{item.name}}</td> 
    </tr></tbody> 
</table> 
<uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination> 
<script> 
$scope.items = [] //here i have for example 15 items..it comes through rest 
totalItems = $scope.items.length; //15 
$scope.currentPage=1;//1. page 
$scope.maxSize=4; //maximum 4 page show 
</script>

可能有人帮助我吗？非常感谢！

来源

2016-04-21 kissmark

你的问题不是很清楚。您是否试图在每页显示固定数量的项目？或者你是否动态地试图控制每页的项目数量？ –

ui-bootstrap默认为每页10个，所以我只想在一页中显示前10项第二页最后5项....如果35个项目出现：第一页10秒10第三10和最后5. – kissmark

所以我想每页最多允许10个项目，当我有超过10个项目时做分页 – kissmark

你可以看看小提琴手here。基本上，我已经创建了一个自定义过滤器，它将当前页码和页面大小作为输入，然后分出需要在UI中显示的项目。

过滤

myApp.filter('paginate', function() { 
    return function(items, page, pageSize) { 
    if (items === undefined || items === null) 
     return []; 
    if (pageSize === undefined || pageSize === null || pageSize < 0 || pageSize >= items.length) 
     return items; 
    var filtered = []; 
    page = page - 1; 
    console.log(page * pageSize + " " + parseInt((page * pageSize) + pageSize)); 
    filtered = items.slice(page * pageSize, parseInt((page * pageSize) + pageSize)); 
    return filtered; 
    } 
});

HTML

<div ng-controller="MyCtrl"> 
    <div ng-repeat="item in items | paginate: currentPage : pageSize"> 
    {{item}} 
    </div> 
    <input type="number" ng-model="currentPage" /> 
</div>

来源

2016-04-21 18:18:41

非常清晰，非常简单...非常感谢！ :) – kissmark

很高兴帮助！ –

使用的用户界面的自举的pagination directive

来源

2016-04-21 17:18:42

如何使用ngrepeat和bootstrap ui使用angularjs创建分页？

回答

相关问题