Фильтры AngularJS

Фильтры AngularJS — это компоненты фреймворка AngularJS (версии 1.x), предназначенные для форматирования и преобразования данных перед их отображением в пользовательском интерфейсе. Фильтры позволяют изменять вид данных (например, чисел, дат, строк) без изменения исходных данных в модели, а также выполнять фильтрацию и сортировку массивов. Они являются частью механизма двустороннего связывания данных и используются в шаблонах HTML с помощью символа вертикальной черты (|).

История

AngularJS был разработан компанией Google и впервые выпущен в 2009 году. Фильтры появились в ранних версиях фреймворка как простой способ форматирования данных в представлении. В версии 1.2 (2013 год) встроенные фильтры были дополнены, а также появилась возможность создавать пользовательские фильтры. В последующих версиях AngularJS (вплоть до 1.8.x) функциональность фильтров оставалась стабильной, но с выходом Angular (версии 2+), который не поддерживает фильтры в том же виде, концепция была заменена на пайпы (pipes). Несмотря на это, AngularJS продолжает использоваться в устаревших проектах, и фильтры остаются его ключевой особенностью.

Классификация

Фильтры AngularJS делятся на два основных типа:

Встроенные фильтры

AngularJS предоставляет несколько встроенных фильтров, которые доступны по умолчанию:

1. currency — форматирует число как денежную единицу. Принимает код валюты (по умолчанию «$») и количество десятичных знаков.
2. date — форматирует дату в заданный строковый формат (например, 'yyyy-MM-dd').
3. filter — выбирает подмножество элементов из массива на основе заданного критерия. Поддерживает строки, объекты и функции.
4. json — преобразует объект в JSON-строку.
5. limitTo — ограничивает массив или строку указанным количеством элементов/символов.
6. lowercase — преобразует строку в нижний регистр.
7. number — форматирует число с разделителями разрядов и указанным количеством десятичных знаков.
8. orderBy — сортирует массив по указанному полю или функции.
9. uppercase — преобразует строку в верхний регистр.

Пользовательские фильтры

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

``javascript angular.module('myApp').filter('removeSpaces', function() { return function(input) { return input ? input.replace(/\s/g, '') : ''; }; }); ``

Применение

Фильтры применяются в шаблонах HTML с помощью синтаксиса {{ expression | filterName }}. Также возможна цепочка фильтров, когда результат одного фильтра передаётся другому: {{ expression | filter1 | filter2 }}. Фильтры могут принимать аргументы, которые передаются через двоеточие: {{ expression | filterName:arg1:arg2 }}.

Примеры использования

Форматирование валюты: ``html <p>Цена: {{ price | currency:'RUB':2 }}</p> ` Вывод: Цена: 1 000,00 ₽ (при price = 1000`).

Сортировка массива: ``html <ul> <li ng-repeat="user in users | orderBy:'name'">{{ user.name }}</li> </ul> ``

Фильтрация по строке: ``html <input ng-model="searchText"> <ul> <li ng-repeat="user in users | filter:searchText">{{ user.name }}</li> </ul> ``

Форматирование даты: ``html <p>Дата: {{ today | date:'dd.MM.yyyy' }}</p> ` Вывод: Дата: 15.10.2023 (при today = new Date(2023, 9, 15)`).

Характеристики

Фильтры AngularJS обладают следующими особенностями:

• Чистота функций: фильтры не должны изменять исходные данные; они возвращают новое значение.
• Производительность: при каждом цикле дайджеста (digest cycle) фильтры пересчитываются, что может привести к снижению производительности при работе с большими массивами или сложными преобразованиями. Для оптимизации рекомендуется использовать однократное связывание (::) в AngularJS 1.3+.
• Локализация: встроенные фильтры currency, date и number зависят от локали браузера, но могут быть переопределены через сервис $locale.
• Доступность: фильтры могут использоваться не только в шаблонах, но и в контроллерах, сервисах и других компонентах через сервис $filter.

Примеры

Фильтр для обрезки текста

``javascript angular.module('myApp').filter('truncate', function() { return function(input, length) { if (!input) return ''; length = length || 20; return input.length > length ? input.substring(0, length) + '...' : input; }; }); ``

Использование в шаблоне: ``html <p>{{ longText | truncate:30 }}</p> ``

Фильтр для форматирования телефонного номера

``javascript angular.module('myApp').filter('phone', function() { return function(input) { if (!input) return ''; var cleaned = input.replace(/\D/g, ''); if (cleaned.length === 10) { return '(' + cleaned.substring(0, 3) + ') ' + cleaned.substring(3, 6) + '-' + cleaned.substring(6); } return input; }; }); ``

Критика

Фильтры AngularJS подвергались критике за несколько недостатков:

• Производительность: из-за пересчёта при каждом дайджесте фильтры могут вызывать задержки в больших приложениях.
• Ограниченность: встроенные фильтры не всегда покрывают потребности разработчиков, что приводит к созданию множества пользовательских фильтров.
• Сложность отладки: цепочки фильтров могут затруднить понимание того, как именно преобразуются данные.
• Устаревание: с выходом Angular (версии 2+) фильтры были заменены на пайпы, которые работают более эффективно и имеют более строгую типизацию.

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

Источники

1. Официальная документация AngularJS (версия 1.x) — раздел «Фильтры».
2. Книга «AngularJS: Up and Running» (Brad Green, Shyam Seshadri, 2014).
3. Статья «Understanding AngularJS Filters» на сайте Scotch.io (2014).
4. Документация по AngularJS на сайте W3Schools.