Фильтрация списка дел
=====================

* Назад
* Обзор: Client-side JavaScript frameworks
* Далее

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

|  |  |
| --- | --- |
| Необходимые условия: | Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки (en-US) |
| Цель: | Добавить функционал фильтрации к вашему приложению. |

Код фильтрации
--------------

Фильтрация элементов основана на свойстве `filter`, которое вы ранее добавили в `app.component.ts`:


```js
filter: 'all' | 'active' | 'done' = 'all';
```


Значение фильтра по умолчанию — `all`, но так же может быть `active` или `done`.

Добавление элементов управления фильтром
----------------------------------------

 В `app.component.html`, добавьте следующий html перед кнопкой **Add** но над разделом, в котором перечислены элементы.
 В следующем снипете существующие секции в вашем HTML отмечены комментарии поэтому вы точно можете видеть где разместить кнопки.


```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-приложение и предоставляются дополнительные ресурсы для продолжения учебного пути.

* Назад
* Обзор: Client-side JavaScript frameworks
* Далее
В это модуле
------------

* Введение в клиентские фреймворки (en-US)
* Основные функции фреймворков (en-US)
* React
    + Начало работы с React
    + Начало создания приложения списка дел с React (en-US)
    + Компоненты React-приложения (en-US)
    + Интерактивность React: события и состояние (en-US)
    + Интерактивность React: редактирование, фильтрация, условная отрисовка (en-US)
    + Доступность в React (en-US)
    + Ресурсы по React (en-US)
* Ember
    + Начало работы с Ember (en-US)
    + Структура Ember-приложения и компоненты (en-US)
    + Интерактивность Ember: события, классы и состояние (en-US)
    + Интерактивность Ember: функциональность подвала, условная отрисовка (en-US)
    + Маршрутизация в Ember (en-US)
    + Ресурсы по Ember и устранение неполадок (en-US)
* 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
    + Начало работы с Angular
    + Начинаем приложение списка дел с использованием Angular
    + Стилизация Angular-приложения
    + Создание компонента элемента (item component)
    + Фильтрация списка дел
    + Сборка Angular-приложений и другие ресурсы