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 visibility and removes items from the DOM. I want to limit to a number of visible items while keeping everything in the DOM.

Here is the current code that I have. My goal is to always show no more than 50 items in the list even though items contains 500 items.

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

This will initially limit to 50 items, but if I filter the list (by modifying item.visible on some items), the list never shows items in the range of 50 - 500 and instead displays less than 50 items. What's the right way to limit an ng-repeat so that it only counts visible items towards the limit restriction?

Answer 1

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