Использование ng-repeat и limitTo для ограничения количества отображаемых видимых элементов

Я пытаюсь ограничить свои результирующие наборы фиксированным числом. Я могу использовать limitTo с ng-repeat, но это ограничивает элементы независимо от их текущей видимости и удаляет элементы из DOM. Я хочу ограничить количество видимых элементов, сохраняя все в DOM.

Вот текущий код, который у меня есть. Моя цель состоит в том, чтобы всегда показывать не более 50 элементов в списке, хотя items содержит 500 элементов.

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

Вначале это ограничится 50 элементами, но если я отфильтрую список (путем изменения item.visible для некоторых элементов), список никогда не отображает элементы в диапазоне от 50 до 500 и вместо этого отображает менее 50 элементов. Какой правильный способ ограничить ng-repeat так, чтобы он учитывал только видимые элементы в отношении ограничения по лимиту?

Ответ 1

Вы можете использовать:

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

filter:{visible: true} вернет список всех видимых элементов

Для получения дополнительной информации об фильтрующем фильтре вы можете взглянуть на документ angularjs. http://docs.angularjs.org/api/ng.filter:filter

Ответ 2

Это также можно сделать так:

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

Ответ 3

Существует несколько подходов, возможно, наиболее многократно используется для создания собственного "видимого" настраиваемого фильтра, который ищет видимый атрибут для ваших элементов. Тогда вы можете их связать.

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

Здесь ссылка SO для создания пользовательских фильтров

Ответ 4

Вы можете использовать ng-if с индексом $index для указания отображения DOM. Все еще генерирует ng-if комментарии, но не загружает объект, так что замечательная улучшенная производительность.

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