Обработка пустого списка в AngularJS с ng-repeat: решения

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

Чтобы вывести уведомление при пустом списке в AngularJS, используйте директиву ng-if:

<div ng-if="!myList.length">Список пуст, как и моя чашка кофе... ☕</div>
<div ng-repeat="item in myList"></div>

Данный код проверяет наличие элементов в списке myList и отображает соответствующее сообщение в случае, если список пуст. Это предотвращает ненужную отрисовку элементов.

Основные подходы к работе с пустыми списками

Существуют два основных подхода к работе с пустыми списками:

• Вывести уведомление о пустом списке: Используйте ng-show="!myList.length" для отображения сообщения, если список пуст.
• Скрыть сообщение при наличии данных в списке: С помощью ng-hide="myList.length" можно скрыть сообщение, когда в списке появляются элементы.

Для проверки, является ли объект пустым, применяйте Object.keys(myObject).length === 0.

Индикация состояния загрузки

Указать на процесс загрузки данных при асинхронных запросах можно с помощью следующего кода:

<div ng-if="myList === null">Загрузка... Можете выпить кофе, пока идёт ожидание. ☕</div>

Применение фильтров и персонализированных сообщений

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

<div ng-if="!filteredItems.length">Элементы по заданному запросу не найдены.</div>
<ul>
  <li ng-repeat="item in filteredItems">{{ item.name }}</li>
</ul>

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

Рассмотрим ситуацию с пустым списком в контексте директивы ng-repeat:

Этап: ng-repeat

Участники: Элементы списка

Ситуация: Сцена пуста (в списке отсутствуют элементы)

Результат:
- В списке есть элементы: Участники заполняют сцену!
- Список пуст: "К сожалению, представление отменено!" 🎭

Таким образом, мы либо видим активность элементов на "сцене" списка, либо получаем информацию о том, что список пуст.

Превосходя ожидания

Улучшение пользовательского взаимодействия при пустом списке

Важно создать положительное впечатление у пользователя даже в том случае, если список пуст:

• Динамические плашки-заглушки: Показывайте плашки, сигнализирующие о процессе загрузки данных.
• Элегантное уведомление о пустоте списка: Информируйте пользователя об отсутствии данных в списке в случае, если это является частью задуманной логики.
• Контекстное уведомление: Адаптируйте сообщение о пустом списке под конкретный контекст использования.

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

Повышение производительности

Применение ng-if позволяет избежать лишних манипуляций с DOM, добавляя или удаляя элементы только при необходимости:

// Элементы удаляются из DOM, когда они не нужны 🍹🏝️
<div ng-if="itemsAreLoading">Загрузка...</div>
<div ng-repeat="item in myList"></div>

Применение фильтров и условное отображение

Использование ng-hide в зависимости от размера отфильтрованного списка делает его чувствительным к применяемым фильтрам:

// Поиск, подобный поиску в библиотеке 📚🕵️‍♀️
<input type="text" ng-model="search">
<div ng-repeat="item in myList | filter:search">
  {{ item.name }}
</div>
<div ng-hide="(myList | filter:search).length">По вашему запросу ничего не найдено. Возможно, это время для нового изобретения!</div>

Работа с пользовательскими фильтрами в AngularJS

Пользовательские фильтры позволяют более детально настраивать взаимодействие со списками и могут быть использованы с ng-show или ng-hide:

// Настраиваемый фильтр, подобно вышибале на входе списка 🚪💪
app.filter('emptyFilter', function() {
  return function(list) {
    return list.some(item => /* проверка элемента */);
  };
});

Примените его следующим образом:

<div ng-show="!(myList | emptyFilter)">Список пуст. Вероятно, завлекло посмотреть что-то на Netflix! 📺</div>

Полезные ресурсы

1. AngularJS — официальная документация AngularJS по директиве ngRepeat.
2. Обсуждение на Stack Overflow — полезный разговор о работе с пустыми массивами в ngRepeat.
3. Руководство по ngShow/ngHide в AngularJS — официальное руководство AngularJS по директивам ngShow и ngHide.
4. Обучение созданию настраиваемых фильтров в AngularJS — узнайте, как создавать собственные уникальные фильтры в AngularJS.
5. Расширение ngRepeat — как применить ngIf, ngElse, ngThen для улучшения условного отображения.
6. Группировка вложенных списков в ngRepeat — научитесь определять пустоту массивов с помощью ngRepeat.
7. Распространённые ошибки разработчиков, работающих с AngularJS — изучите типичные проблемы, с которыми сталкиваются разработчики.