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

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

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

Когда выполняются фильтры

В шаблонах фильтры выполняются только при изменении их входных данных. Это более эффективно, чем выполнение фильтра на каждом $digest, как это происходит с выражениями.

Есть два исключения из этого правила:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

См. пример в учебнике по phonecat.