Limiting number of displayed results when using ngRepeat

javascript model-view-controller angularjs scope

197,249

Solution 1

Slightly more "Angular way" would be to use the straightforward limitTo filter, as natively provided by Angular:

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

PLUNKER

Solution 2

A little late to the party, but this worked for me. Hopefully someone else finds it useful.

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>

Solution 3

here is anaother way to limit your filter on html, for example I want to display 3 list at time than i will use limitTo:3

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>

Solution 4

store all your data initially

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 5);
    $scope.allPhones = data;
  });

  $scope.orderProp = 'age';
  $scope.howMany = 5;
  //then here watch the howMany variable on the scope and update the phones array accordingly
  $scope.$watch("howMany", function(newValue, oldValue){
    $scope.phones = $scope.allPhones.splice(0,newValue)
  });
}

EDIT had accidentally put the watch outside the controller it should have been inside.

Solution 5

This works better in my case if you have object or multi-dimensional array. It will shows only first items, other will be just ignored in loop.

.filter('limitItems', function () {
  return function (items) {
    var result = {}, i = 1;
    angular.forEach(items, function(value, key) {
      if (i < 5) {
        result[key] = value;
      }
      i = i + 1;
    });
    return result;
  };
});

Change 5 on what you want.

View more solutions

197,249

Captain Stack

I am a full stack engineer who specializes in web technology, especially JavaScript and Ruby frameworks. I am deeply interested in the application of technology to furthering human well-being which is what inspired me to study informatics and human-computer interaction at the University of Washington.

Updated on July 25, 2022

Comments

Captain Stack almost 2 years

I find the AngularJS tutorials hard to understand; this one is walking me through building an app that displays phones. I’m on step 5 and I thought as an experiment I’d try to allow users to specify how many they’d like to be shown. The view looks like this:

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>

I’ve added this line where users can enter how many results they want shown:

How Many: <input ng-model="quantity">

Here’s my controller:

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

The important line is:

$scope.phones = data.splice(0, 'quantity');

I can hard-code in a number to represent how many phones should be shown. If I put 5 in, 5 will be shown. All I want to do is read the number in that input from the view, and put that in the data.splice line. I’ve tried with and without quotes, and neither work. How do I do this?

stephan.com almost 9 years

It's worth pointing out - and saving someone else a few minutes - that if you're using "track by" it MUST be last after the filters.
rom99 almost 9 years

Implementation of limitTo uses array.slice() anyway, any difference in size of array should have the same difference on performance as doing it yourself. github.com/angular/angular.js/blob/master/src/ng/filter/…
rom99 almost 9 years

I suspect this would be less efficient than using limitToFilter if it's a large array, because every item presumably has to be evaluated
Matt Saunders almost 9 years

but limitTo does not actually limit data sent to the view, whereas doing it this way does. I tested this using console.log().
rom99 almost 9 years

Yes, what you are doing is exposing a new array to the view (I wouldn't really think of it as 'sending' anything anywhere). If you were only interested in the first 10 items in data, and data is not referenced anywhere else, doing it this way might reduce memory footprint (assuming data can be garbage collected). But if you are still keeping a reference to data around, this is no more efficient than using limitTo.
Jeroen Vannevel over 8 years

I had a scenario where I wanted to show 6 items from a backing array of much more. Using ng-if="$index < 6" allowed me to show only the first 6 while keeping the entire array searchable (I have a filter combined with a search field).
Tim Büthe over 8 years

Is there a way to get the number of available items when using filter and limitTo? I would like to use limitTo but provide a "load more" button to increase the limit. This should only be displayed if more records available.
0x777 over 8 years

What is filter:query ?
jusopi about 8 years

@defmx per the OP's question, query comes from Search: <input ng-model="query">
fdrv about 8 years

It is not limit, it is hide the whole result if count more then 3.
couzzi about 8 years

@Jek-fdrv - No, ng-if, in this case, will not render the DOM element of the repeater whose $index is greater than 3. if $index in the repeater is 0, 1, or 2, the condition is true and the DOM nodes are created. ng-if differs from ng-hide in the sense that elements are not added to the DOM.