Фильтр форматирует значение выражения для отображения пользователю. Их можно использовать во шаблонах представлений, контроллерах или сервисах, и легко определить собственный фильтр.

Основной API — filterProvider.

Использование фильтров в шаблонах представлений

Фильтры могут быть применены к выражениям в шаблонах представлений с использованием следующего синтаксиса:

{{ expression | filter }}

Например, разметка {{ 12 | currency }} форматирует число 12 как валюту, используя фильтр currency. Результирующее значение — $12.00.

Фильтры могут быть применены к результату другого фильтра. Это называется "цепочкой" и использует следующий синтаксис:

{{ expression | filter1 | filter2 | ... }}

Фильтры могут иметь аргументы. Синтаксис для этого:

{{ expression | filter:argument1:argument2:... }}

Например, разметка {{ 1234 | number:2 }} форматирует число 1234 с 2 десятичными знаками, используя фильтр number. Результирующее значение — 1,234.00.

Использование фильтров в контроллерах, сервисах и директивах

Вы также можете использовать фильтры в контроллерах, сервисах и директивах. Для этого, внедрите зависимость с именем <filterName>Filter в свой контроллер/сервис/директиву. Например, используя зависимость numberFilter будет внедрен фильтр чисел. Переданный аргумент — функция, которая принимает значение для форматирования в качестве первого аргумента и параметры фильтра, начиная со второго аргумента.

В примере ниже используется фильтр под названием filter. Этот фильтр преобразует массивы в подмассивы на основе условий. Фильтр может быть применен в шаблоне представления с разметкой {{ctrl.array | filter:'a'}}, что выполнит поиск по всему тексту для "a". Однако, использование фильтра в шаблоне представления переоценивает фильтр на каждой итерации цикла, что может быть дорогостоящим, если массив большой.

Поэтому в примере ниже фильтр вызывается напрямую в контроллере. Это позволяет контроллеру вызывать фильтр только при необходимости (например, при загрузке данных со стороны сервера или изменении выражения фильтра).

Создание пользовательских фильтров

Написание собственного фильтра очень просто: просто зарегистрируйте новую фабричную функцию фильтра в своем модуле. Внутренне это использует filterProvider. Эта фабричная функция должна возвращать новую функцию фильтра, которая принимает входное значение в качестве первого аргумента. Любые аргументы фильтра передаются как дополнительные аргументы функции фильтра.

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

Следующий пример фильтра переворачивает строку текста. Кроме того, он условно приводит текст в верхний регистр.

Фильтры с состоянием

Настоятельно не рекомендуется создавать фильтры с состоянием, поскольку их выполнение нельзя оптимизировать с помощью Angular, что часто приводит к проблемам производительности. Многие фильтры с состоянием могут быть преобразованы в фильтры без состояния, просто сделав скрытое состояние моделью и сделав его аргументом фильтра.

Однако, если вам необходимо создать фильтр со состоянием, вы должны отметить фильтр как $stateful, что означает, что он будет выполняться один или несколько раз во время каждого $digest цикла.

Тестирование пользовательских фильтров

См. учебник phonecat для примера.