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!

Possible duplicate of [Pagination on a list using ng-repeat](https://stackoverflow.com/questions/11581209/pagination-on-a-list-using-ng-repeat) — Nope, Aug 25 '17 at 15:14
you only want to show 1st 10 records, or you want to show 10 records a time and next 10 upon some button click ? — Sachet Gupta, Aug 25 '17 at 15:38

S4beR · Answer 1 · 2017-08-25T15:48:47.880

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

score 0 · Answer 2 · answered Aug 25 '17 at 22:06

0

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.

answered Aug 25 '17 at 22:06

Varun Sukheja

6,170
5
51
93

you can create function next() and prev(). In next() you have to add limit to value of begin each time, in your case add 10 to begin each time. In start begin= 1 then 11 then 21 and so on. Same goes for prev() but instead of adding limit you have to subtract limit from begin as 31 then 21 then 11 and last 1. – Varun Sukheja Aug 28 '17 at 18:49
did this answer solved your problem, if yes then please vote for this question and mark this as resolved – Varun Sukheja Aug 29 '17 at 04:50

Show Next 10 items in ng-repeat?

2 Answers2