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

Фильтры форматируют значение выражения для отображения пользователю. Они могут использоваться в шаблонах представления, контроллерах или сервисах. 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.

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

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