Фильтрация списка дел
Теперь перейдем к добавлению функционала позволяющего пользователям фильтровать свои задачи, чтобы они могли просматривать активные, завершенные или все элементы.
Необходимые условия: | Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки (en-US) |
---|---|
Цель: | Добавить функционал фильтрации к вашему приложению. |
Код фильтрации
Фильтрация элементов основана на свойстве filter
, которое вы ранее добавили в app.component.ts
:
filter: 'all' | 'active' | 'done' = 'all';
Значение фильтра по умолчанию — all
, но так же может быть active
или done
.
Добавление элементов управления фильтром
В app.component.html
, добавьте следующий html перед кнопкой Add но над разделом, в котором перечислены элементы.
В следующем снипете существующие секции в вашем HTML отмечены комментарии поэтому вы точно можете видеть где разместить кнопки.
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
-->
<!-- Кнопки, которые меняют отображение элементов на все, только активные или только выполненные -->
<div class="btn-wrapper">
<button
class="btn btn-menu"
[class.active]="filter == 'all'"
(click)="filter = 'all'">
All
</button>
<button
class="btn btn-menu"
[class.active]="filter == 'active'"
(click)="filter = 'active'">
To Do
</button>
<button
class="btn btn-menu"
[class.active]="filter == 'done'"
(click)="filter = 'done'">
Done
</button>
</div>
<!-- <h2>{{items.length}} item(s)</h2>
<ul>... -->
Нажатие на кнопки изменяет значение filter
, что определяет отображаемые элементы items
, а так же стили, применяемые к активной кнопке.
- Если пользователь нажимает кнопку All, то отображаются все элементы.
- Если пользователь нажимает кнопку To do, только элементы со значением свойства
done
равнымfalse
отображаются. - Если пользователь нажимает кнопку Done, только элементы со значением свойства
done
равнымtrue
отображаются.
Привязка атрибута class, которая происходит с использованием квадратных скобок []
, управляет цветом текста кнопок.
Привязка [class.active]
, применяет класс active
когда значение filter
совпадает с выражением.
Например, когда пользователь нажимает кнопку Done, которая устанавливает значение filter
в done
, выражение привязки класса filter == 'done'
возвращает true
.
Когда значение filter
равно done
, Angular применяет класс active
к кнопке Done, что делает цвет текста зеленым.
Как только пользователь нажимает одну из других кнопок, значение filter
больше не done
, поэтому цвет текста больше не зеленый.
Резюме
Это было быстро! Поскольку у вас уже был частично реализован код фильтрации в app.component.ts
, все что вам нужно было сделать — это отредактировать шаблон, чтобы добавить элементы управления для фильтрации. В следующей и последней статье рассматривается, как создать полностью готовое Angular-приложение и предоставляются дополнительные ресурсы для продолжения учебного пути.
В это модуле
- Введение в клиентские фреймворки (en-US)
- Основные функции фреймворков (en-US)
- React
- Ember
- Vue
- Начало работы с Vue (en-US)
- Создание вашего первого компонента Vue (en-US)
- Отрисовка списка Vue-компонентов (en-US)
- Добавление новой формы во Vue: события, методы, и модели (en-US)
- Стилизация Vue-компонентов с CSS (en-US)
- Использование вычисляемых свойств во Vue (en-US)
- Условная отрисовка во Vue: Редактирование существующих дел (en-US)
- Управление фокусом во Vue с помощью refs (en-US)
- Ресурсы по Vue (en-US)
- Svelte
- Начало работы со Svelte (en-US)
- Начинаем приложение списка дел c использованием Svelte (en-US)
- Динамическое поведение в Svelte: работа с переменными и пропсами (en-US)
- Компоненты Svelte-приложения (en-US)
- Продвинутый Svelte: реактивность, жизненный цикл, доступность (en-US)
- Работа хранилищами в Svelte (en-US)
- Поддержка TypeScript в Svelte (en-US)
- Развёртывание и следующие шаги (en-US)
- Angular