Co to jest filtr w AngularJS?
Filtra w angularjs pomaga sformatować wartość wyrażenia do wyświetlania dla użytkownika, bez zmiany oryginalnego formatu. Na przykład, jeśli chcesz, aby twój ciąg był pisany małymi lub dużymi literami, możesz to zrobić za pomocą filtrów. Istnieją wbudowane filtry, takie jak „małe litery”, „wielkie litery”, które mogą odpowiednio pobierać małe i duże litery na wyjściu.
Podobnie w przypadku liczb możesz użyć innych filtrów.
Podczas tego samouczka zobaczymy różne standardowe wbudowane filtry dostępne w Angular.
W tym samouczku nauczysz się:
- Filtr małych liter w AngularJS
- Filtr wielkich liter w AngularJS
- Filtr liczbowy w AngularJS
- Filtr walutowy w AngularJS
- Filtr JSON w AngularJS
Filtr małych liter w AngularJS
Ten filtr przyjmuje dane wyjściowe w postaci ciągu, formatuje ciąg i wyświetla wszystkie znaki w ciągu jako małe litery.
Spójrzmy na przykład filtrów AngularJS z opcją AngularJS tolowercase.
W poniższym przykładzie użyjemy kontrolera do wysłania ciągu znaków do widoku za pośrednictwem obiektu scope. Następnie użyjemy filtru w widoku, aby przekonwertować ciąg na małe litery.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Objaśnienie kodu:
- Tutaj przekazujemy ciąg, który jest kombinacją małych i wielkich liter w zmiennej składowej o nazwie „tutorialName” i dołączamy go do obiektu zasięgu. Wartość przekazywanego ciągu to „AngularJS”.
- Używamy zmiennej składowej „tutorialName” i umieszczamy symbol filtru (|), co oznacza, że dane wyjściowe należy zmodyfikować za pomocą filtru. Następnie używamy słowa kluczowego smallcase, aby powiedzieć, że za pomocą wbudowanego filtru wyprowadzamy cały ciąg małymi literami.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia
- Można zauważyć, że łańcuch „AngularJS”, który został przekazany w zmiennej tutorialName, będącej kombinacją małych i wielkich liter, został wykonany.
- Po wykonaniu końcowe dane wyjściowe są pisane małymi literami, jak pokazano powyżej.
Filtr wielkich liter w AngularJS
Ten filtr jest podobny do filtra małych liter; różnica polega na tym, że pobiera łańcuch wyjściowy, formatuje go i wyświetla wszystkie znaki w ciągu jako wielkie litery.
Spójrzmy na przykład filtru AngularJS z wielką literą z opcją małych liter.
W poniższym przykładzie z dużymi literami AngularJS użyjemy kontrolera do wysłania ciągu znaków do widoku za pośrednictwem obiektu scope. Następnie użyjemy filtru w widoku, aby przekonwertować ciąg na wielkie litery.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Objaśnienie kodu:
- Tutaj przekazujemy ciąg będący kombinacją małych i wielkich liter „Angular JS” w zmiennej składowej o nazwie „tutorialName” i dołączamy go do obiektu zasięgu.
- Używamy zmiennej składowej „tutorialName” i umieszczamy symbol filtru (|), co oznacza, że dane wyjściowe należy zmodyfikować za pomocą filtru. Następnie używamy słowa kluczowego uppercase, aby powiedzieć, że użyjemy wbudowanego filtru do wyprowadzenia całego ciągu wielkimi literami.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Można zauważyć, że łańcuch, który został przekazany w zmiennej tutorialName, będący kombinacją małych i wielkich liter, został wyprowadzony wszystkimi dużymi literami.
Filtr liczbowy w AngularJS
Ten filtr formatuje liczbę i może zastosować ograniczenie do miejsc dziesiętnych liczby.
Spójrzmy na przykład filtrów AngularJS z opcją liczbową.
W poniższym przykładzie
Chcieliśmy pokazać, jak możemy użyć filtru liczbowego do sformatowania liczby do wyświetlenia z ograniczeniem do 2 miejsc po przecinku.
Użyjemy kontrolera, aby wysłać liczbę do widoku za pośrednictwem obiektu scope. Następnie użyjemy filtru w widoku, aby zastosować filtr liczbowy.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Objaśnienie kodu:
- Tutaj przekazujemy liczbę z większą liczbą miejsc dziesiętnych w zmiennej składowej o nazwie tutorialID i dołączamy ją do obiektu zasięgu.
- Używamy zmiennej składowej tutorialID i umieszczamy symbol filtru (|) wraz z filtrem liczbowym. Teraz w liczbie: 2, te dwa oznaczają, że filtr powinien ograniczyć liczbę miejsc dziesiętnych do 2.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Można zauważyć, że liczba, która została przekazana w zmiennej tutorialID, która miała dużą liczbę miejsc dziesiętnych, została ograniczona do 2 miejsc po przecinku ze względu na zastosowaną liczbę: 2 filtry.
Filtr walutowy w AngularJS
Ten filtr formatuje filtr walutowy na liczbę.
Załóżmy, że jeśli chcesz wyświetlić liczbę z walutą, taką jak $, możesz użyć tego filtru.
W poniższym przykładzie użyjemy kontrolera do wysłania liczby do widoku za pośrednictwem obiektu scope. Następnie użyjemy filtru w widoku, aby zastosować bieżący filtr.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Objaśnienie kodu:
- Tutaj przekazujemy liczbę w zmiennej składowej o nazwie tutorialprice i dołączamy ją do obiektu zasięgu.
- Używamy zmiennej składowej tutorialprice i umieszczamy symbol filtra (|) wraz z filtrem walutowym. Zwróć uwagę, że zastosowana waluta zależy od ustawień języka, które zostały zastosowane w urządzeniu.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia
- Widać, że symbol waluty został dołączony do liczby, która została przekazana w zmiennej tutorialprice.
- W naszym przypadku, ponieważ ustawienia językowe to angielski (Stany Zjednoczone), symbol $ jest wstawiany jako waluta.
Filtr JSON w AngularJS
Ten filtr formatuje dane wejściowe podobne do JSON i stosuje filtr AngularJS JSON, aby uzyskać dane wyjściowe w formacie JSON.
W poniższym przykładzie użyjemy kontrolera do wysłania obiektu typu JSON do widoku za pośrednictwem obiektu scope. Następnie użyjemy filtru w widoku, aby zastosować filtr JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Objaśnienie kodu:
- Tutaj przekazujemy liczbę w zmiennej składowej o nazwie „tutorial” i dołączamy ją do obiektu zasięgu. Ta zmienna składowa zawiera ciąg typu JSON o identyfikatorze samouczka: 12 i TutorialName: „Angular”.
- Używamy samouczka zmiennych składowych i umieszczamy symbol filtru (|) wraz z filtrem JSON.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Widać, że JSON, podobnie jak ciąg, jest analizowany i wyświetla w przeglądarce odpowiedni obiekt JSON.
Podsumowanie:
- Filtry służą do zmiany sposobu wyświetlania danych wyjściowych użytkownikowi.
- Angular zapewnia wbudowane filtry, takie jak małe i wielkie litery, aby zmienić wyjście łańcuchów odpowiednio na małe i duże litery.
- Istnieje również możliwość zmiany sposobu wyświetlania liczb za pomocą filtru liczbowego poprzez określenie liczby miejsc dziesiętnych, które mają być wyświetlane w liczbie.
- Można również użyć filtru walutowego, aby dołączyć symbol waluty do dowolnej liczby.
- Jeśli istnieje wymóg posiadania określonego wyjścia json, angular zapewnia również filtr JSON do filtrowania dowolnego ciągu podobnego do JSON do formatu JSON.