Улучшить эту документациюФильтры

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

Основной 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.

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

Вы также можете использовать фильтры в контроллерах, сервисах и директивах.

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

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

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

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

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

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

Состоятельные фильтры

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

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

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

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