AngularJS szűrők és AngularJS egyéni szűrő példával
James Hartman
⚡ Okos összefoglaló
Az AngularJS szűrői egy kifejezés értékét formázzák megjelenítéshez anélkül, hogy megváltoztatnák az alapul szolgáló adatokat. A beépített szűrők lefedik a kis- és nagybetűket, a számokat, a pénznemet és a JSON-t, míg egy egyéni szűrő kezeli azokat a formázási szabályokat, amelyeket a keretrendszer még nem biztosít.
Mi az a szűrő az AngularJS-ben?
A Szűrés AngularJS-ben segít formázni egy kifejezés értékét a felhasználó számára történő megjelenítéshez az eredeti érték megváltoztatása nélkül. Például, ha egy karakterláncot kis- vagy nagybetűvel szeretne megjeleníteni, ezt szűrők segítségével teheti meg. A beépített szűrők, mint például a „kisbetű” és a „nagybetű”, a kért kis- és nagybetűs karakterláncot adják vissza, és további szűrők léteznek számokhoz, pénznemekhez és JSON-hoz.
⚠️ Verzió megjegyzés: Az AngularJS (az 1.x ág) 2021. december 31-én elérte az élettartama végét, és nem kap további biztonsági javításokat. Az alábbiakban leírtak továbbra is érvényesek a meglévő AngularJS alkalmazások karbantartása érdekében; a modern Angularban ugyanezt a szerepet egy pipe tölti be.
A szűrőket a függőleges vonal karakterével alkalmazzuk a nézetben. Mielőtt mindegyiket megnéznénk, érdemes tudni, hogy miért írnánk sajátot.
Kisbetűs szűrő az AngularJS-ben
Ez a szűrő egy karakterláncot fogad el, és az összes karakterét kisbetűvel jeleníti meg.
Az alábbiakban egy vezérlő egy karakterláncot küld a nézetnek a scope objektumon keresztül, és egy szűrő kisbetűssé alakítja azt.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code Magyarázat
- Az „Angular JS” vegyes betűtípusú karakterláncot egy tagváltozóba helyezzük, amelynek neve
tutorialNamea hatókör objektumon. - A szűrő szimbólum (|) jelöli a transzformáció kimenetét, és a
lowercaseA kulcsszó a beépített szűrőt alkalmazza, amely a teljes karakterláncot kisbetűsként jeleníti meg.
⚠️ Minden hirdetésre alkalmaztuk a javításokat. Mind a hat eredeti példának három közös hibája volt. chrset="UTF 8" nem érvényes attribútum vagy kódolás, és most az charset="UTF-8". angular-route.js töltött előtt angular.min.js, ami modulhibát dob, és soha nem volt használatban – eltávolításra került, akárcsak a nem használt jQuery hivatkozás. A szöveg azt is állította, hogy az érték „AngularJS” volt, míg a kód „Angular JS”-t állított be; a szöveg most egyezik.
output:
A kis- és nagybetűs karakterlánc teljes egészében kisbetűsként jelenik meg. Az ellentétes átalakítás ugyanígy működik.
Nagybetűs szűrő az AngularJS-ben
Ez a szűrő a kisbetűs szűrő megfelelője, amely minden karaktert nagybetűvel jelenít meg.
Az alábbiakban egy vezérlő egy karakterláncot küld a nézetnek a scope objektumon keresztül, és egy szűrő nagybetűssé alakítja azt.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code Magyarázat
- Az „Angular JS” vegyes betűtípusú karakterláncot a következőbe helyezzük:
tutorialNameés a hatókör objektumhoz csatolva. - A szűrő szimbólumot (|) a következő követi:
uppercasekulcsszó, így a beépített szűrő a teljes karakterláncot nagybetűvel jeleníti meg.
⚠️ Javítás: Az eredeti ezt a részt úgy vezette be, mint „egy példa az AngularJS nagybetűs szűrőjére kisbetűs opcióval”, ami kétszer is hibás. Ez a rész a nagybetűs szűrőt mutatja be, és az AngularJS-nek egyáltalán nincs nagybetűs szűrője – csak az első betű nagybetűsítéséhez egyéni szűrőre van szükség, amelynek felépítését a későbbi részek mutatják be.
output:
A kis- és nagybetűk közötti szűrők nem fogadnak el argumentumokat. A következő szűrő azt mutatja be, hogyan ad át egy kettőspont paramétert egy szűrőnek.
Számszűrő az AngularJS-ben
Ez a szűrő formáz egy számot, és korlátozhatja a megjelenítendő tizedesjegyek számát.
Az alábbi példa a számszűrőt használja egy két tizedesjegyre korlátozott érték megjelenítéséhez. Egy vezérlő a scope objektumon keresztül elküldi a számot a nézetnek, és a szűrőt a nézet alkalmazza.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code Magyarázat
- Egy sok tizedesjegyet tartalmazó számot egy tagváltozóba, az úgynevezett
tutorialIDés a hatókör objektumhoz csatolva. - A szűrő szimbólumot (|) a következő követi:
number:2A kettőspont átad egy argumentumot, a 2 pedig két tizedesjegyet állít be. Az érték kerekítésre kerül a megjelenítéshez, így a 3.565656 3.57-ként jelenik meg, míg a hatókör a teljes számot megtartja.
output:
Egy egyszerű szám formázása gyakran nem elegendő, ha az érték pénzt jelent, amit a következő szűrő kezel.
Valutaszűrő az AngularJS-ben
Ez a szűrő pénznemértékként formáz egy számot, és egy pénznemjelet, például $-t helyez el előtte.
Az alábbi példában egy vezérlő egy számot küld a nézetnek a scope objektumon keresztül, és a pénznemszűrő alkalmazásra kerül a nézetben.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code Magyarázat
- Egy számot egy tagváltozóba helyezünk, melynek neve
tutorialpriceés a hatókör objektumhoz csatolva. - A szűrő szimbólumot (|) a következő követi:
currencyszűrő.
⚠️ Javítás: Az eredeti azt állította, hogy a pénznem „a gépen alkalmazott nyelvi beállításoktól függ”. Ez nem így van. Az AngularJS alapértelmezés szerint a könyvtárhoz mellékelt en-US területi beállítást használja, így a szimbólum a $ az operációs rendszertől függetlenül. Töltse be a megfelelőt angular-locale_*.js fájlt, vagy adja át közvetlenül a szimbólumot: {{tutorialprice | currency:"£"}}.
output:
A karakterláncok és számok egyszerű értékek. Az utolsó beépített szűrő teljes objektumokkal foglalkozik.
JSON-szűrő az AngularJS-ben
Ez a szűrő formázott objektummá alakítja az objektumot. JSON karakterlánc, ami hasznos a hatókör adatainak fejlesztés közbeni vizsgálatához.
Az alábbi példában egy vezérlő egy objektumot küld a nézetnek a scope objektumon keresztül, és a JSON szűrőt a nézetben alkalmazzák.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code Magyarázat
- Egy tárgy, amely
TutorialID: 12és atutorialName: "Angular"nevű tagváltozóba kerül.tutorialés a hatókör objektumhoz csatolva. - A szűrő szimbólumot (|) a következő követi:
jsonszűrő, amely behúzott JSON szöveggé szerializálja az objektumot.
⚠️ Javítás: Az eredeti ezt az értéket „számként” és „JSON típusú karakterláncként” írta le. Egyik sem. Ez egy JavaScript objektum, és a json szűrő az, ami JSON karakterlánccá alakítja megjelenítéshez.
output:
Ez az öt szűrő a leggyakoribb eseteket fedi le. Amikor egyik sem adja a szükséges kimenetet, akkor sajátot írsz.
AngularJS egyéni szűrő
Előfordulhat, hogy az AngularJS beépített szűrői nem felelnek meg a kimenet formázására vonatkozó követelményeknek. Ilyen esetben létrehozható egy egyéni AngularJS szűrő, amely a kívánt módon adja vissza a kimenetet.
Egy egyéni szűrő regisztrálva van egy modulon, majd pontosan úgy viselkedik, mint egy beépített. Az alábbi szakaszok először a standard szűrőket ismertetik, mivel az egyéni szűrő ugyanazt a pipe szintaxist használja, majd bemutatják, hogyan lehet létrehozni egyet.
Egyéni szűrő létrehozása az AngularJS-ben
Az alábbi példában egy karakterlánc halad át a következőből: ellenőr a nézethez a hatókör objektumon keresztül, de nem szabad úgy megjeleníteni, ahogy van. Egyéni szűrő a AngularJS hozzáfűz egy újabb karakterláncot, és megjeleníti a kész eredményt.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code Magyarázat
- Az „Angular” karakterláncot egy tagváltozóba helyezzük, melynek neve
tutorialés a hatókör objektumhoz csatolva. - Az AngularJS biztosítja a
filterEgyéni szűrő létrehozásához használt regisztrációs módszer. A „Demofilter” a neve, és a nézet erre a névre hivatkozik. - Ez egy egyéni szűrő szabványos alakja: a regisztrált függvény egy gyár visszaadja a munkát végző függvényt. Ez a függvény első paraméterként kapja a szűrt értéket, és visszaadja az eredményt – itt a bemenetet a „Tutorial” hozzáfűzésével.
- A szűrő a nézetben ugyanazzal a pipe szintaxissal kerül alkalmazásra, mint bármely beépített szűrő.
👍 Tipp: A szűrőnevek hagyományosan kisbetűsek vagy camelCase-ek. A „Demofilter” működik, de egy olyan név, mint a appendTutorial jobban olvasható, és elkerüli az ütközést egy beépített névvel.
output:
A „Tutorial” szó hozzáfűzésre került az átadott karakterlánchoz. tutorial változó. Ez a szűrő mindig ugyanazt a szöveget fűzi hozzá, amelyet a következő szakasz konfigurálhatóvá tesz.
Argumentumok átadása egyéni szűrőnek
A fenti szűrő fixen kódolja a hozzáfűzött szöveget, így csak egy dolgot tud tenni. Beépített szűrők, mint például number:2 elfogad egy argumentumot a kettőspont után, és egy egyéni szűrő is képes rá: minden paraméter az első után egy kettősponttal elválasztott argumentumhoz van leképezve a nézetben.
Három lépésből áll: paraméterek hozzáadása után input A visszaadott függvényben adjon meg egy alapértelmezett értéket minden opcionális értékhez, hogy a szűrő argumentum kihagyása esetén is működjön, majd adja át az argumentumokat a nézetben kettősponttal elválasztva.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
A nézet ezután a következőképpen néz ki, ahol a „Tutorial” szóból suffix és a kötőjelből lesz separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Két részlet könnyen figyelmen kívül hagyható. Az argumentumok AngularJS kifejezések, tehát egy literális karakterláncot idézőjelek közé kell tenni, míg egy idézőjelek nélküli szót hatókör tulajdonságként olvasunk be. A szűrők láncolnak is, mindegyik az előző kimenetét kapja: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Figyelmeztetés: Tartsa a szűrőt tisztán — ugyanaz a kimenet ugyanarra a bemenetre, külső változtatások nélkül. Az AngularJS gyorsítótáraz egy tiszta szűrőt, és csak akkor futtatja újra, ha a bemenet megváltozik. Egy olyan szűrőt, amely az órát olvassa vagy egy szolgáltatást mutál, meg kell jelölni. $stateful, amely letiltja a gyorsítótárazást, és minden kivonatolási ciklusban lefuttatja a szűrőt, ami a lassú oldalak gyakori oka.
A szűrők nem korlátozódnak sablonokra. Ugyanez a szűrő meghívható innen: JavaSzkript, ahogy az alábbiakban látható.
Szűrők használata egy vezérlőben a $filter szolgáltatással
A szűrők nézetben történő alkalmazása a leggyakoribb eset, de az átalakított értékre néha a vezérlőn belül is szükség van, például az adatok szerverre küldése előtt. Az AngularJS minden regisztrált szűrőt, legyen az beépített vagy egyéni, elérhetővé tesz a következőn keresztül: $filter szolgáltatás. Injektáld be, hívd meg a szűrő nevével a szűrőfüggvény lekéréséhez, majd hívd meg azt az értékkel és az esetleges argumentumokkal.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Létezik egy rövidebb forma is: a szűrő nevének beillesztése, majd a Filter, Mint például a uppercaseFilter, közvetlenül biztosítja a szűrőfüggvényt, és azonnal meghívható. Mindkét forma ugyanarra a függvényre oldódik fel, tehát a választás stilisztikai jellegű.
Két felhasználási mód merül fel ismétlődően. Az első a hasznos adat előkészítése: egy dátumnak általában egy rögzített mintázat szerint kell elérnie egy API-t, és $filter('date')(value, 'yyyy-MM-dd') anélkül állítja elő, hogy megérintené az űrlaphoz kötött értéket. A második a gyűjtemény szűkítése a vezérlőben, ahelyett, hogy meghagyná orderBy egy ng-ismétlés kifejezés, ahol minden kivonatoláskor újra lefut.
Az így befecskendezett szűrők továbbra is regisztrálva vannak a modulban, ezért egyéni szűrőt kell deklarálni a következővel: app.filter mielőtt bármelyik irányító megkérdezné $filter különben az AngularJS ismeretlen szolgáltatói hibát dob.
Szűrő meghívása JavaA szkript egy fontos dologban különbözik a sablontól: az eredményt egyszer számítja ki és tárolja a hatókörben, ahelyett, hogy minden kivonatoláskor újraszámolná. Ezáltal ez a gyorsabb megoldás egy ritkán változó értékhez, és a rossz megoldás egy olyanhoz, amelyiknek muszáj változnia. track felhasználói bevitel.
