Иногда встроенные фильтры в Angular не могут удовлетворить потребности или требования для фильтрации вывода. В таком случае можно создать настраиваемый фильтр, который может передавать выходные данные требуемым образом.
Как создать собственный фильтр
В приведенном ниже примере мы собираемся передать строку в представление из контроллера через объект области видимости, но мы не хотим, чтобы строка отображалась как есть.
Мы хотим гарантировать, что всякий раз, когда мы отображаем строку, мы передаем настраиваемый фильтр, который добавит еще одну строку и отобразит заполненную строку для пользователя.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Пояснение к коду:
- Здесь мы передаем строку "Angular" в переменной-члене с именем tutorial и присоединяем ее к объекту области видимости.
- Angular предоставляет службу фильтрации, которую можно использовать для создания нашего настраиваемого фильтра. «Демофильтр» - это имя, данное нашему фильтру.
- Это стандартный способ определения настраиваемого фильтра, при котором возвращается функция. Эта функция содержит настраиваемый код для создания настраиваемого фильтра. В нашей функции мы берем строку "Angular", которая передается из нашего представления фильтру, и добавляем к ней строку "Tutorial".
- Мы используем наш Demofilter для нашей переменной-члена, которая была передана из контроллера в представление.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
- Видно, что наш настраиваемый фильтр был применен и
- Слово «Учебник» было добавлено в конец строки, которая была передана в руководстве по переменным-членам.
Резюме:
Если есть требование, которое не удовлетворяется ни одним из фильтров, определенных в angular, вы можете создать свой собственный фильтр и добавить свой собственный код, чтобы определить тип вывода, который вы хотите от фильтра.