Что такое фильтр в AngularJS?
Фильтр в AngularJS помогает форматировать значение выражения для отображения пользователя без изменения исходного формата. Например, если вы хотите, чтобы ваша строка была в нижнем или верхнем регистре, вы можете сделать это с помощью фильтров. Существуют встроенные фильтры, такие как «нижний регистр», «верхний регистр», которые могут соответственно извлекать строчные и прописные буквы.
Аналогично для чисел вы можете использовать другие фильтры.
В этом руководстве мы увидим различные стандартные встроенные фильтры, доступные в Angular.
В этом руководстве вы узнаете:
- Фильтр нижнего регистра в AngularJS
- Фильтр верхнего регистра в AngularJS
- Числовой фильтр в AngularJS
- Валютный фильтр в AngularJS
- Фильтр JSON в AngularJS
Фильтр нижнего регистра в AngularJS
Этот фильтр принимает строковый вывод, форматирует строку и отображает все символы в строке в нижнем регистре.
Давайте посмотрим на пример фильтров AngularJS с опцией AngularJS tolowercase.
В приведенном ниже примере мы будем использовать контроллер для отправки строки в представление через объект области видимости. Затем мы воспользуемся фильтром в представлении, чтобы преобразовать строку в нижний регистр.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Пояснение к коду:
- Здесь мы передаем строку, которая представляет собой комбинацию символов нижнего и верхнего регистра в переменной-члене с именем «tutorialName», и присоединяем ее к объекту области видимости. Значение передаваемой строки - «AngularJS».
- Мы используем переменную-член "tutorialName" и помещаем символ фильтра (|), что означает, что выходные данные необходимо изменить с помощью фильтра. Затем мы используем ключевое слово в нижнем регистре, чтобы сказать использовать встроенный фильтр для вывода всей строки в нижнем регистре.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
С выхода
- Видно, что строка "AngularJS", которая была передана в переменной tutorialName, которая представляла собой комбинацию символов нижнего и верхнего регистра, была выполнена.
- После выполнения окончательный вывод будет в нижнем регистре, как показано выше.
Фильтр верхнего регистра в AngularJS
Этот фильтр похож на фильтр нижнего регистра; разница в том, что принимает строковый вывод, форматирует строку и отображает все символы в строке в верхнем регистре.
Давайте посмотрим на пример фильтра с заглавными буквами AngularJS с опцией нижнего регистра.
В приведенном ниже примере AngularJS с заглавными буквами мы будем использовать контроллер для отправки строки в представление через объект области видимости. Затем мы воспользуемся фильтром в представлении, чтобы преобразовать строку в верхний регистр.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Пояснение к коду:
- Здесь мы передаем строку, которая представляет собой комбинацию символов нижнего и верхнего регистра «Angular JS» в переменной-члене с именем «tutorialName», и присоединяем ее к объекту области видимости.
- Мы используем переменную-член "tutorialName" и помещаем символ фильтра (|), что означает, что выходные данные необходимо изменить с помощью фильтра. Затем мы используем ключевое слово в верхнем регистре, чтобы сказать использовать встроенный фильтр для вывода всей строки в верхнем регистре.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
- Можно видеть, что строка, переданная в переменной tutorialName, представляющая собой комбинацию символов нижнего и верхнего регистра, была выведена полностью в верхнем регистре.
Числовой фильтр в AngularJS
Этот фильтр форматирует число и может ограничивать количество десятичных знаков.
Давайте посмотрим на пример фильтров AngularJS с опцией числа.
В приведенном ниже примере
Мы хотели продемонстрировать, как мы можем использовать числовой фильтр для форматирования числа для отображения с ограничением до 2 знаков после запятой.
Мы будем использовать контроллер для отправки числа в представление через объект области видимости. Затем мы будем использовать фильтр в представлении, чтобы применить числовой фильтр.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Пояснение к коду:
- Здесь мы передаем число с большим количеством десятичных знаков в переменной-члене с именем tutorialID и присоединяем его к объекту области видимости.
- Мы используем переменную-член tutorialID и помещаем символ фильтра (|) вместе с числовым фильтром. Теперь в номере: 2 двойка означает, что фильтр должен ограничить количество десятичных знаков до 2.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
- Можно видеть, что число, которое было передано в переменной tutorialID с большим количеством десятичных знаков, было ограничено 2 десятичными знаками из-за примененных фильтров number: 2.
Валютный фильтр в AngularJS
Этот фильтр преобразует фильтр валюты в число.
Предположим, если вы хотите отобразить число с такой валютой, как $, то этот фильтр можно использовать.
В приведенном ниже примере мы будем использовать контроллер для отправки числа в представление через объект области видимости. Затем мы будем использовать фильтр в представлении, чтобы применить текущий фильтр.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Пояснение к коду:
- Здесь мы передаем число в переменной-члене с именем tutorialprice и присоединяем его к объекту области видимости.
- Мы используем переменную-член tutorialprice и помещаем символ фильтра (|) вместе с фильтром валюты. Обратите внимание, что применяемая валюта зависит от языковых настроек, применяемых к аппарату.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
С выхода
- Видно, что символ валюты был добавлен к числу, которое было передано в переменной tutorialprice.
- В нашем случае, поскольку языковые настройки - английский (США), в качестве валюты вставлен символ $.
Фильтр JSON в AngularJS
Этот фильтр форматирует входные данные, подобные JSON, и применяет фильтр AngularJS JSON для вывода в формате JSON.
В приведенном ниже примере мы будем использовать контроллер для отправки объекта типа JSON в представление через объект области. Затем мы будем использовать фильтр в представлении, чтобы применить фильтр JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Пояснение к коду:
- Здесь мы передаем число в переменной-члене, называемой «учебник», и присоединяем его к объекту области видимости. Эта переменная-член содержит строку типа JSON с идентификатором Tutorial ID: 12 и TutorialName: «Angular».
- Мы используем руководство по переменным-членам и помещаем символ фильтра (|) вместе с фильтром JSON.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
- Видно, что JSON, как строка, анализируется и отображается в браузере как соответствующий объект JSON.
Резюме:
- Фильтры используются для изменения способа отображения вывода пользователю.
- Angular предоставляет встроенные фильтры, такие как фильтры нижнего и верхнего регистра, для изменения вывода строк на нижний и верхний регистр соответственно.
- Также существует возможность изменить способ отображения чисел с помощью числового фильтра, указав количество десятичных знаков, которые должны отображаться в числе.
- Также можно использовать фильтр валюты, чтобы добавить символ валюты к любому числу.
- Если требуется иметь вывод, специфичный для json, angular также предоставляет фильтр JSON для фильтрации любой строки, подобной JSON, в формат JSON.