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

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

Основной 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. См. Состоятельные фильтры для получения дополнительной информации. Обратите внимание, что ни один из встроенных фильтров Angular не является $stateful.

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

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

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

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

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

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

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

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

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

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

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

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

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