Show Next 10 items in ng-repeat?

Question

I have to show items from my list (there can be 100 items or 20 items), and I want to limit them to 10 per page. How can I do it?

This is my code (I have some drag/drop , ignore that)

<div class="unallocated-box" style="top:10px;" 
        ng-repeat="item in list2 | orderBy : 'title'" data-drop="true" ng-model='list2'
        jqyoui-droppable="{index: {{$index}}, applyFilter: 'filterIt'}" 
        ng-show="item.FirstName">

  <div data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list2"
        jqyoui-draggable="{index: {{$index}},animate:true, applyFilter: 'filterIt'}"
        class="seat unallocated-seat">
  <div class="sitting-student">{{ item.FirstName }}</div>
  </div>
</div>

this is the ng-repeat I want to limit : ng-repeat="item in list2

If someone has an advice, thanks in advance!

Answer 1

You can use limitTo or can create your own filter in AngularJS. To create a custom filter to restrict your list size refer to https://docs.angularjs.org/api/ng/filter/filter

<label>
   Limit {{numbers}} to:
   <input type="number" step="1" ng-model="numLimit">
</label>
<p>Output numbers: {{ numbers | limitTo:numLimit }}</p>

You can also check this thread Using ng-repeat and limitTo to limit the number of visible items displayed

In your case maybe you should create a custom filter (on similar line as limitTo) which takes page number as output and then restrict the list to number of items depending on page

<label>
   Limit {{numbers}} to:
   <input type="number" step="1" ng-model="numLimit">
   <input type="number" step="1" ng-model="pageNumber">
</label>
<p>Output numbers: {{ numbers | limitTo:numLimit:pageNumber }}</p>

Your custom filter will use numLimit * (pageNumber - 1) as starting index and will return a new list of size numLimit

Answer 2

Use angular filters, syntax :

limitTo : limit : begin 

So your code goes in this way, Let say you have variables $scope.limit=10 and $scope.begin=1; then in your ng-repeat it becomes

   item in list2 |  limitTo : limit : begin | orderBy : 'title'"

you can write a function, clicking on next/previous button updates the value of begin .