Question

创建分页的最简单方法是什么？我可以使用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>

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

Answer 1

你可以看看小提琴手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>

Answer 2

使用ui-bootstrap的pagination directive

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

2 个答案: