Using ng-repeat and limitTo to limit the number of visible items displayed

Question

I\'m trying to limit my result sets to a fixed number. I can use limitTo with ng-repeat, but this limits items regardless of their current visibili

Answer 1

There are a couple of approaches, maybe the most reusable is for you to create your own 'visible' custom filter which looks for visible attribute on your items. Then you could chain them.

<div ng-repeat="item in items | visible | limitTo: 50">

Here's a SO link to create custom filters

Answer 2

You can use:

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
    <p>{{item.id}}</p>
</div>

filter:{visible: true} will return a list of all visible items

You can take a look at the angularjs docu for more information on the filter filter. http://docs.angularjs.org/api/ng.filter:filter

Answer 3

It is also possible to do it this way:

<div ng-repeat="item in items" ng-show="$index<50">
    <p>item.id</p>
</div>

Answer 4

You can use ng-if with $index to specify DOM display. Still generates ng-if comments but doesn't load the object so much improved performance noticed.

<div ng-init="your.objects={{},{},{}}; your.max=10">
  <div ng-repeat="object in your.objects" ng-if="$index<your.max">
    {{object}}
  </div>
</div>