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

How to create pagination with angularjs with ngrepeat and bootstrap ui?

本文关键字：bootstrap ui 创建 分页 ngrepeat 何使用 angularjs 使用      更新时间：2023-09-26

创建分页的最简单方法是什么？我想在浏览项目列表时使用 ng-repeat，每个项目都有 id 和名称属性。下一个代码适用于例如 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 的分页指令

相关文章：