Какво е филтър в 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}}
Обяснение на кода:
- Тук предаваме число в променлива член, наречена "tutorial", и го прикачваме към обекта на обхвата. Тази променлива на член съдържа низ от тип JSON на Tutorial ID: 12 и TutorialName: "Angular".
- Използваме урока за променлива на члена и поставяме символ на филтър (|) заедно с JSON филтъра.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода,
- Вижда се, че JSON като низ се анализира и показва подходящ JSON обект в браузъра.
Резюме:
- Филтрите се използват за промяна на начина, по който изходът се показва на потребителя.
- Angular осигурява вградени филтри като малки и главни филтри за промяна на изхода на низовете съответно на малки и главни букви.
- Съществува и разпоредба за промяна на начина на показване на числата чрез използване на филтъра на числата, като се посочи броят на десетичните точки, които да се показват в числото.
- Можете също така да използвате валутния филтър, за да добавите символа за валута към произволен номер.
- Ако има изискване да има специфичен за json изход, angular предоставя и JSON филтър за филтриране на всеки JSON като низ в JSON формат.