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

Question

What is the simpliest way to create pagination ? I'd liket to use ng-repeat where i go through the items list and every item has id and name attributes. The next code works for example 15 items and show 2 page but i'd like to show the first page the first 10 item and the other page shows the other items...and so on if i have a lot of items.

My code what i tried:

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

Could someone helps to me? Thanks a lot!

Answer 1

You can take a look at the fiddler here . Basically I have created a custom filter which will take the current page number and page size as input and then slice out the items that needs to be shown in the UI.

Filter

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的分页指令