Mi a szűrő az AngularJS-ben?
Az AngularJS szűrő segít formázni egy kifejezés értékét, amelyet az eredeti formátum megváltoztatása nélkül jeleníthet meg a felhasználó számára. Például, ha a karakterláncot kis- vagy nagybetűkkel kívánja megtenni, akkor azt szűrőkkel teheti meg. Vannak beépített szűrők, mint például a „kisbetű”, a „nagybetű”, amelyek ennek megfelelően lekérhetik a kis- és nagybetűket.
Hasonlóképpen a számokhoz más szűrőket is használhat.
Az oktatóanyag során látni fogjuk a különböző szabványos beépített szűrőket, amelyek Angular nyelven érhetők el.
Ebben az oktatóanyagban megtanulja-
- Kisbetűs szűrő szögletes JS-ben
- Nagybetűs szűrő szögletes JS-ben
- Számszűrő szögbenJS
- Pénznemszűrő AngularJS-ben
- JSON szűrő szögbenJS
Kisbetűs szűrő szögletes JS-ben
Ez a szűrő felvesz egy karakterlánc kimenetet és formázza a karakterláncot, és a karakterlánc összes karakterét kisbetűként jeleníti meg.
Nézzünk meg egy példát az AngularJS szűrőkre az AngularJS tolowercase opcióval.
Az alábbi példában egy vezérlővel fogunk karaktersorozatot küldeni egy nézetnek a hatókör objektumon keresztül. Ezután egy szűrőt használunk a nézetben a karakterlánc kisbetűvé alakításához.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Kód Magyarázat:
- Itt adunk át egy karakterláncot, amely kis- és nagybetűk kombinációja a "tutorialName" nevű tagváltozóban, és csatolja a hatókör objektumhoz. Az átadott karakterlánc értéke "AngularJS".
- A "tutorialName" tagváltozót használjuk, és egy szűrőszimbólumot (|) helyezünk el, ami azt jelenti, hogy a kimenetet egy szűrő használatával módosítani kell. Ezután a kisbetűs kulcsszót használjuk arra, hogy a beépített szűrőt használjuk a teljes karakterlánc kisbetűvel történő kiadására.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Látható, hogy az "AngularJS" karakterlánc, amelyet a tutorialName változóban adtak át, amely kis- és nagybetűk kombinációja volt, végrehajtásra került.
- A végrehajtás után a végső kimenet kisbetűvel jelenik meg, a fentiek szerint.
Nagybetűs szűrő szögletes JS-ben
Ez a szűrő hasonló a kisbetűs szűrőhöz; A különbség az, hogy felvesz egy karakterlánc kimenetet és formázza a karakterláncot, és a karakterlánc összes karakterét nagybetűként jeleníti meg.
Nézzünk meg egy példát az AngularJS nagybetűs szűrőjére a kisbetűs opcióval.
Az alábbi AngularJS nagybetűs példában egy vezérlővel fogunk egy karakterláncot küldeni egy nézetnek a hatókör objektumon keresztül. Ezután egy szűrőt használunk a nézetben a karakterlánc nagybetűvé alakításához.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Kód Magyarázat:
- Itt adunk át egy karakterláncot, amely kis- és nagybetűk "Angular JS" kombinációja a "tutorialName" nevű tagváltozóban, és csatolja a hatókör objektumhoz.
- A "tutorialName" tagváltozót használjuk, és egy szűrőszimbólumot (|) helyezünk el, ami azt jelenti, hogy a kimenetet egy szűrő használatával módosítani kell. Ezután a nagybetűs kulcsszót használjuk arra, hogy a beépített szűrőt használjuk a teljes karakterlánc nagybetűs kiadására.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Látható, hogy a tutorialName változóban megadott karakterlánc, amely kis- és nagybetűk kombinációja volt, minden nagybetűvel ki lett adva.
Számszűrő szögbenJS
Ez a szűrő formáz egy számot, és korlátot szabhat a szám tizedes pontjaira.
Nézzünk meg egy példát az AngularJS szűrőkre a szám opcióval.
Az alábbi példában
Szeretnénk bemutatni, hogyan használhatjuk a számszűrőt egy szám megjelenítéséhez 2 tizedesjegyes korlátozással.
Vezérlővel fogunk számot küldeni egy nézetnek a hatókör objektumon keresztül. Ezután egy szűrőt fogunk használni a nézetben a számszűrő alkalmazásához.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Kód Magyarázat:
- Itt egy nagyobb számú tizedesjegyű számot adunk át a tutorialID nevű tagváltozóban, és csatoljuk a hatókör objektumhoz.
- A tutorialID tag változót használjuk, és egy szűrőszimbólumot (|) helyezünk el a számszűrővel együtt. Most a 2-es számban a kettő azt jelzi, hogy a szűrőnek 2-re kell korlátoznia a tizedesjegyek számát.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Látható, hogy a nagy számú tizedesponttal rendelkező tutorialID változóban átadott számot 2 tizedesjegyre korlátozták az alkalmazott szám: 2 szűrő miatt.
Pénznemszűrő AngularJS-ben
Ez a szűrő a pénznemszűrőt számokká formázza.
Tegyük fel, hogy ha olyan számot akart megjeleníteni, amelynek pénzneme például $, akkor ez a szűrő használható.
Az alábbi példában egy vezérlővel fogunk számot küldeni egy nézetnek a hatókör objektumon keresztül. Ezután a nézetben szűrőt használunk az aktuális szűrő alkalmazásához.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Kód Magyarázat:
- Itt egy számot adunk át a tutorialprice nevű tagváltozóban, és csatoljuk a hatókör objektumhoz.
- A tag változó tutorialprice-t használjuk, és egy szűrőszimbólumot (|) helyezünk el a pénznemszűrővel együtt. Ne feledje, hogy az alkalmazott pénznem a gépen alkalmazott nyelvi beállításoktól függ.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Látható, hogy a pénznem szimbólumot hozzáadták a változóhoz a tutorialprice-ben megadott számhoz.
- Esetünkben, mivel a nyelvi beállítások angol (Egyesült Államok), a dollár szimbólum kerül beillesztésre pénznemként.
JSON szűrő szögbenJS
Ez a szűrő JSON-szerű bemenetet formáz és az AngularJS JSON szűrőt alkalmazza a kimenet JSON-ban történő megadására.
Az alábbi példában egy vezérlő segítségével JSON típusú objektumot küldünk egy nézetbe a hatókör objektumon keresztül. Ezután egy szűrőt fogunk használni a nézetben a JSON szűrő alkalmazásához.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Kód Magyarázat:
- Itt egy számot adunk át a "tutorial" nevű tagváltozóban, és csatoljuk a hatókör objektumhoz. Ez a tagváltozó egy JSON típusú sztringet tartalmaz a Tutorial ID: 12 és a TutorialName: "Angular" sorból.
- A tag változó oktatóanyagát használjuk, és a JSON szűrővel együtt szűrőszimbólumot (|) helyezünk el.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Látható, hogy a JSON, mint egy karakterlánc, értelmezve van, és megfelelő JSON objektumot jelenít meg a böngészőben.
Összegzés:
- A szűrők segítségével megváltoztathatja a kimenet felhasználó számára történő megjelenítését.
- Az Angular beépített szűrőket biztosít, például kis- és nagybetűs szűrőket, hogy a húrok kimenetét kis- és nagybetűvé változtassák.
- Van egy olyan rendelkezés is, amely megváltoztatja a számok megjelenítésének módját a számszűrő használatával, megadva a számban megjelenítendő tizedespontok számát.
- Használhatja a pénznemszűrőt a valuta szimbólum tetszőleges számhoz fűzéséhez.
- Ha a json specifikus kimenetre van szükség, a szögletes a JSON szűrőt is biztosítja a JSON-szerű karakterláncok JSON formátumba történő szűrésére.