Обновление счётчика при фильтрации ng-repeat в AngularJS

Быстрый ответ

Это можно сделать, используя ng-repeat в AngularJS. Для отображения количества отфильтрованных элементов используется псевдоним с помощью as:

<div ng-repeat="item in filteredItems = (items | filter:searchText)">
  {{ item.name }}
</div>
Отфильтровано: {{ filteredItems.length }}

В данном случае $scope.items в контроллере содержит массив элементов, а searchText связывает с полем для фильтрации. Псевдоним filteredItems обновляется в соответствии с вводом пользователя, показывая требуемое количество элементов после фильтрации.

Решения для разных версий AngularJS

AngularJS 1.3+: использование псевдонима 'as'

С момента выхода AngularJS 1.3 и более поздних версий, можно использовать as в ng-repeat. Дополнительные функции включают:

• Двустороннюю привязку: Позволяет отображать длину массива напрямую через $scope: $scope.filteredItemsLength = filteredItems.length. Это обеспечивает отображение количества элементов в режиме реального времени.
• Динамическое отображение количества: Включает использование $watch для отслеживания изменений в searchText, что позволяет пользователю мгновенно видеть результаты фильтрации.

Подробнее об этом расскажет наш спикер на видео

AngularJS <1.3: ручное управление фильтрацией

В ранних версиях AngularJS метод с псевдонимом не работает. Вместо этого необходимо использовать $filter в своем контроллере для управления фильтрацией:

$scope.filteredItems = $filter('filter')($scope.items, $scope.searchText);

Чтобы автоматически обновлять filteredItems, стоит использовать наблюдатель за изменениями searchText:

$scope.$watch('searchText', function(newValue) {
  $scope.filteredItems = $filter('filter')($scope.items, newValue);
});

Потенциальные особые случаи и улучшение UX

Обработка события "нет результатов"

При ненахождении результатов необходимо уведомить пользователя об этом:

<div ng-show="filteredItems.length === 0">Ничего не найдено. Измените ваш запрос.</div>

Оптимизация работы с данными

Если вы работаете с большими объемами данных, не рекомендуется частое использование фильтров. Вместо этого следует производить фильтрацию на уровне контроллера.

Структурирование данных

Организовывая данные в виде массива объектов, вы улучшите эффективность фильтрации и читаемость кода:

$scope.books = [
  { title: 'AngularJS Guide', author: 'Ng-conf Crew' },
  { title: 'Mastering AngularJS', author: 'John Papa' },
];

Визуализация

Возьмите ваши данные и представьте их как книжную полку. Применяя к ней фильтр "Guide", вы получите:

[Книга: AngularJs Guide]

А также общий отчет о количестве в виде:

Найдено совпадений: 1!

Разбор решений для уникальных сценариев

Реализация фильтрации в реальном времени

С помощью filterFilter в контроллере можно обеспечить мгновенное обновление счетчика в процессе изменения данных.

Избавление от дубликатов в ng-repeat

Используйте уникальное выражение для фильтрации, чтобы избежать повторений:

<div ng-repeat="item in (data | filter:query as results)">
  {{ item }}
</div>
Найдено элементов: {{ results.length }}.

Улучшенная визуализация с псевдонимами

В AngularJS 1.3 и более поздних версиях (data | filter: x as results) позволяет разделить данные и логику, что упрощает поддержку и тестирование кода.

Полезные материалы

1. AngularJS — официальная документация по ng-repeat.
2. AngularJS — детальная документация по фильтрам в AngularJS.
3. JavaScript – Angular IE Caching issue for $http – Stack Overflow — обсуждение проблем кэширования и ng-repeat.
4. Building Custom AngularJS Filters | DigitalOcean — руководство по созданию собственных фильтров.
5. AngularJS Best Practices and Tips from AngularJS experts | Toptal® — лучшие практики работы с ng-repeat.
6. AngularJS's Controller As and the vm Variable — статья об эффективности связывания данных в ng-repeat.
7. Angular Filters — обучающие материалы с примерами использования фильтров в ng-repeat.