[英]How to create pagination with angularjs with ngrepeat and bootstrap ui?
创建分页的最简单方法是什么? 我想在项目列表中使用ng-repeat,每个项目都有id和name属性。 下一个代码可用于例如15个项目并显示2页,但是我想在第一页中显示前10个项目,而其他页面则显示其他项目...等等,如果我有很多项目。
我尝试的代码:
<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>
有人可以帮我吗? 非常感谢!
你可以在这里看看提琴手。 基本上,我创建了一个自定义过滤器,该过滤器将当前页码和页面大小作为输入,然后切出需要在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>
使用ui-bootstrap的分页指令
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.