Фильтрация списка дел
Теперь перейдем к добавлению функционала позволяющего пользователям фильтровать свои задачи, чтобы они могли просматривать активные, завершенные или все элементы.
Необходимые условия: | Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки |
---|---|
Цель: | Добавить функционал фильтрации к вашему приложению. |
Код фильтрации
Фильтрация элементов основана на свойстве 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-приложение и предоставляются дополнительные ресурсы для продолжения учебного пути.
В это модуле
-
React
-
Ember
-
Vue
- Начало работы с Vue
- Создание вашего первого компонента Vue
- Отрисовка списка Vue-компонентов
- Добавление новой формы во Vue: события, методы, и модели
- Стилизация Vue-компонентов с CSS
- Использование вычисляемых свойств во Vue
- Условная отрисовка во Vue: Редактирование существующих дел
- Управление фокусом во Vue с помощью refs
- Ресурсы по Vue
-
Svelte
- Начало работы со Svelte
- Начинаем приложение списка дел c использованием Svelte
- Динамическое поведение в Svelte: работа с переменными и пропсами
- Компоненты Svelte-приложения
- Продвинутый Svelte: реактивность, жизненный цикл, доступность
- Работа хранилищами в Svelte
- Поддержка TypeScript в Svelte
- Развёртывание и следующие шаги
-
Angular