Що таке фільтр у 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 з використанням великих літер ми будемо використовувати контролер для надсилання рядка до подання через об’єкт scope. Потім ми використаємо фільтр у поданні для перетворення рядка у верхній регістр.
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, і приєднуємо його до об'єкта scope.
- Ми використовуємо змінну члена tutorialprice та додаємо символ фільтра (|) разом із валютним фільтром. Зверніть увагу, що застосовувана валюта залежить від мовних налаштувань, які застосовуються до машини.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу
- Видно, що символ валюти був доданий до числа, яке було передано у змінну tutorialprice.
- У нашому випадку, оскільки мовні налаштування - англійська (США), символ $ вставляється як валюта.
JSON-фільтр у AngularJS
Цей фільтр форматує вхід, подібний до JSON, і застосовує фільтр AngularJS JSON, щоб дати вихід у JSON.
У наведеному нижче прикладі ми будемо використовувати контролер для надсилання об’єкта типу JSON до подання через об’єкт сфери. Потім ми використаємо фільтр у поданні, щоб застосувати фільтр JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Пояснення коду:
- Тут ми передаємо число у змінну-член, що називається "tutorial", і приєднуємо його до об'єкта scope. Ця змінна-член містить рядок типу JSON із ідентифікатором підручника: 12 та TutorialName: "Angular".
- Ми використовуємо підручник зі змінної члена та додаємо символ фільтра (|) разом із фільтром JSON.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу,
- Видно, що JSON, як рядок, аналізується і відображає відповідний об'єкт JSON у браузері.
Короткий зміст:
- Фільтри використовуються для зміни способу відображення вихідних даних для користувача.
- Angular забезпечує вбудовані фільтри, такі як малий та верхній регістри, щоб змінити вивід рядків на малі та великі регістри відповідно.
- Існує також положення про зміну способу відображення чисел за допомогою цифрового фільтра, вказуючи кількість десяткових крапок, що відображатимуться в номері.
- Ви також можете використовувати валютний фільтр, щоб додати символ валюти до будь-якого числа.
- Якщо існує потреба мати певний вивід json, angular також надає фільтр JSON для фільтрації будь-якого JSON-подібного рядка у формат JSON.