Я пытаюсь ограничить свои результирующие наборы фиксированным числом. Я могу использовать 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 так, чтобы он учитывал только видимые элементы в отношении ограничения по лимиту?
Вы можете использовать:
<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
Это также можно сделать так:
<div ng-repeat="item in items" ng-show="$index<50">
<p>item.id</p>
</div>
Существует несколько подходов, возможно, наиболее многократно используется для создания собственного "видимого" настраиваемого фильтра, который ищет видимый атрибут для ваших элементов. Тогда вы можете их связать.
<div ng-repeat="item in items | visible | limitTo: 50">
Вы можете использовать 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>