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

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