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

Фильтры форматируют значение выражения для отображения пользователю. Их можно использовать во шаблонах представлений, контроллерах или сервисах. 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. Дополнительную информацию см. в Stateful filters. Обратите внимание, что никакие встроенные фильтры AngularJS не являются $stateful.

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

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

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

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

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

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

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

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

Stateful фильтры

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

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

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

См. пример в уроке по телефону.