AngularJS-filtre og AngularJS-tilpasset filter med eksempel
James Hartman
⚡ Smart opsummering
Et filter i AngularJS formaterer værdien af et udtryk til visning uden at ændre de underliggende data. Indbyggede filtre dækker store og små bogstaver, tal, valuta og JSON, mens et brugerdefineret filter håndterer enhver formateringsregel, som frameworket ikke allerede leverer.
Hvad er Filter i AngularJS?
A Filtrer i AngularJS hjælper med at formatere værdien af et udtryk, så det vises til brugeren uden at ændre den oprindelige værdi. Hvis du f.eks. ønsker, at en streng skal vises med enten små eller store bogstaver, kan du gøre det ved hjælp af filtre. Indbyggede filtre som 'små bogstaver' og 'store bogstaver' returnerer strengen med den ønskede store eller små bogstaver, og der findes yderligere filtre til tal, valuta og JSON.
⚠️ Versionsnotat: AngularJS (1.x-grenen) nåede slutningen af sin levetid den 31. december 2021 og modtager ikke yderligere sikkerhedsrettelser. Alt nedenfor forbliver korrekt for vedligeholdelse af eksisterende AngularJS-applikationer; i moderne Angular udfyldes den samme rolle af en pipe.
Filtre anvendes i visningen med pipe-tegnet. Før du ser på hvert enkelt, er det nyttigt at vide, hvorfor du ville skrive dit eget.
Filter med små bogstaver i AngularJS
Dette filter tager en streng og viser alle dens tegn med små bogstaver.
Nedenfor sender en controller en streng til viewet via scope-objektet, og et filter konverterer den til små bogstaver.
<!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 Forklaring
- Strengen "Angular JS" med blandede bogstaver placeres i en medlemsvariabel kaldet
tutorialNamepå omfangsobjektet. - Filtersymbolet (|) markerer outputtet til transformation, og
lowercaseNøgleordet anvender det indbyggede filter, der gengiver hele strengen med små bogstaver.
⚠️ Rettelser er anvendt på alle annoncer. Alle seks originale eksemplarer havde tre fejl tilfældigt. chrset="UTF 8" er ikke en gyldig attribut eller kodning, og er nu charset="UTF-8". angular-route.js indlæst før angular.min.js, som kaster en modulfejl, og som aldrig blev brugt — den er blevet fjernet, ligesom den ubrugte jQuery-reference. Teksten hævdede også, at værdien var "AngularJS", mens koden satte "Angular JS"; teksten matcher nu.
Output:
Strengen med blandede bogstaver gengives udelukkende med små bogstaver. Den modsatte transformation fungerer på samme måde.
Stort filter i AngularJS
Dette filter er modstykket til filteret med små bogstaver, der viser alle tegn med store bogstaver.
Nedenfor sender en controller en streng til viewet via scope-objektet, og et filter konverterer den til store bogstaver.
<!-- 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 Forklaring
- Strengen "Angular JS" med blandede store og små bogstaver placeres i
tutorialNameog knyttet til scope-objektet. - Filtersymbolet (|) efterfølges af
uppercasenøgleord, så det indbyggede filter gengiver hele strengen med store bogstaver.
⚠️ Rettelse: Originalen introducerede dette afsnit som "et eksempel på et filter til store bogstaver i AngularJS med muligheden for små bogstaver", hvilket er forkert to gange. Dette afsnit demonstrerer filteret til store bogstaver, og AngularJS har slet intet filter til store bogstaver – kun at bruge det første bogstav til at skrive stort kræver et brugerdefineret filter, som de senere afsnit viser, hvordan man opbygger.
Output:
Store/små bogstavsfiltre accepterer ingen argumenter. Det næste filter viser, hvordan et kolon sender en parameter til et filter.
Nummerfilter i AngularJS
Dette filter formaterer et tal og kan begrænse, hvor mange decimaler der vises.
Eksemplet nedenfor bruger talfilteret til at vise en værdi begrænset til to decimaler. En controller sender tallet til visningen via scope-objektet, og filteret anvendes i visningen.
<!-- 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 Forklaring
- Et tal med mange decimaler placeres i en medlemsvariabel kaldet
tutorialIDog knyttet til scope-objektet. - Filtersymbolet (|) efterfølges af
number:2Kolonet sender et argument, og 2'eren angiver to decimaler. Værdien afrundes til visning, så 3.565656 vises som 3.57, mens oscilloskopet beholder det fulde tal.
Output:
Det er ofte ikke nok at formatere et almindeligt tal, når værdien repræsenterer penge, hvilket er det, det næste filter håndterer.
Valutafilter i AngularJS
Dette filter formaterer et tal som en valutaværdi og sætter et valutasymbol, f.eks. $, foran.
I eksemplet nedenfor sender en controller et tal til visningen via scope-objektet, og valutafilteret anvendes i visningen.
<!-- 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 Forklaring
- Et tal placeres i en medlemsvariabel kaldet
tutorialpriceog knyttet til scope-objektet. - Filtersymbolet (|) efterfølges af
currencyfilter.
⚠️ Rettelse: Originalen hævdede, at valutaen "afhænger af de sprogindstillinger, der er anvendt på maskinen". Det gør den ikke. AngularJS bruger den lokale kode, der følger med biblioteket, en-US som standard, så symbolet er $ uanset operativsystemet. Indlæs det matchende angular-locale_*.js fil, eller send symbolet direkte: {{tutorialprice | currency:"£"}}.
Output:
Strenge og tal er simple værdier. Det endelige indbyggede filter håndterer hele objekter.
JSON-filter i AngularJS
Dette filter konverterer et objekt til et formateret JSON streng, som er nyttig til at inspicere omfangsdata under udvikling.
I eksemplet nedenfor sender en controller et objekt til viewet via scope-objektet, og JSON-filteret anvendes i viewet.
<!-- 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 Forklaring
- En genstand, der holder
TutorialID: 12ogtutorialName: "Angular"placeres i en medlemsvariabel kaldettutorialog knyttet til scope-objektet. - Filtersymbolet (|) efterfølges af
jsonfilter, som serialiserer objektet til indrykket JSON-tekst.
⚠️ Rettelse: Originalen beskrev denne værdi som "et tal" og som "en streng af JSON-typen". Det er ingen af delene. Det er en JavaScript-objektet, og json-filteret er det, der konverterer det til en JSON-streng til visning.
Output:
Disse fem filtre dækker de almindelige tilfælde. Når ingen af dem producerer det output, du har brug for, skriver du dine egne.
AngularJS brugerdefineret filter
Nogle gange kan de indbyggede filtre i AngularJS ikke opfylde kravene til formatering af output. I sådanne tilfælde kan der oprettes et brugerdefineret AngularJS-filter, som returnerer outputtet på den ønskede måde.
Et brugerdefineret filter registreres på et modul og opfører sig derefter præcis som et indbygget filter. Afsnittene nedenfor dækker først standardfiltrene, da et brugerdefineret filter bruger den samme pipe-syntaks, og viser derefter, hvordan man bygger et.
Sådan opretter du brugerdefineret filter i AngularJS
I eksemplet nedenfor passerer en streng fra controller til visningen via scope-objektet, men bør ikke vises som det er. Et brugerdefineret filter i AngularJS tilføjer en anden streng og viser det færdige resultat.
<!-- 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 Forklaring
- Strengen "Angular" placeres i en medlemsvariabel kaldet
tutorialog knyttet til scope-objektet. - AngularJS leverer
filterregistreringsmetode, der bruges til at oprette et brugerdefineret filter. 'Demofilter' er navnet, og det er det navn, visningen refererer til. - Dette er standardformen for et brugerdefineret filter: den registrerede funktion er en fabrik returnerer den funktion, der udfører arbejdet. Funktionen modtager den værdi, der filtreres, som sin første parameter og returnerer resultatet — her inputtet med "Tutorial" tilføjet.
- Filteret anvendes i visningen ved hjælp af den samme pipe-syntaks som ethvert indbygget filter.
💡 Tip: Filternavne er traditionelt små bogstaver eller camelCase. 'Demofilter' fungerer, men et navn som f.eks. appendTutorial læses bedre og undgår sammenstød med et indbygget navn.
Output:
Ordet 'Tutorial' er blevet tilføjet til den streng, der er blevet sendt i tutorial variabel. Dette filter tilføjer altid den samme tekst, hvilket det næste afsnit gør konfigurerbart.
Sådan sender du argumenter til et brugerdefineret filter
Filteret ovenfor hardcoderer den tekst, det tilføjer, så det kun kan gøre én ting. Indbyggede filtre som f.eks. number:2 accepterer et argument efter et kolon, og et brugerdefineret filter kan det samme: hver parameter efter den første knyttes til et kolonsepareret argument i visningen.
Tre trin er involveret: tilføj parametre efter input I den returnerede funktion skal du angive en standardværdi for alt valgfrit, så filteret stadig fungerer, når argumentet udelades, og derefter sende argumenterne i visningen adskilt af kolon.
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; }; });
Visningen lyder så som følger, hvor "Tutorial" bliver til suffix og bindestregen bliver til separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
To detaljer er lette at overse. Argumenter er AngularJS-udtryk, så en streng skal være i citatet, hvorimod et ord uden citatet læses som en scope-egenskab. Filtre kædes også sammen, hvor hvert filter modtager outputtet fra det foregående: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Advarsel: Hold et filter rent — samme output for det samme input, ingen eksterne ændringer. AngularJS cacher et rent filter og kører det igen, kun når inputtet ændres. Et filter, der læser uret eller muterer en service, skal markeres. $stateful, som deaktiverer caching og kører filteret på hver digest-cyklus, en almindelig årsag til træge sider.
Filtre er ikke begrænset til skabeloner. Det samme filter kan kaldes fra JavaScript, som vist nedenfor.
Sådan bruger du filtre i en controller med $filter-tjenesten
Det er almindeligt at anvende et filter i viewet, men den transformerede værdi er nogle gange nødvendig inde i controlleren, for eksempel før data sendes til en server. AngularJS eksponerer alle registrerede filtre, både indbyggede og brugerdefinerede, via $filter service. Injicer den, kald den med filternavnet for at hente filterfunktionen, og kald den derefter med værdien og eventuelle argumenter.
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"); }]);
En kortere form findes også: indsprøjtning af filternavnet efterfulgt af Filter, Såsom uppercaseFilter, leverer filterfunktionen direkte, og den kan kaldes med det samme. Begge former løses til den samme funktion, så valget er stilistisk.
To anvendelser dukker op gentagne gange. Den første er at forberede en nyttelast: en dato skal normalt nå et API i et fast mønster, og $filter('date')(value, 'yyyy-MM-dd') producerer den uden at røre den værdi, der er bundet til formen. Den anden er at indsnævre en samling, når den først er i controlleren, i stedet for at lade den være orderBy i en ng-gentag udtryk, hvor det køres igen ved hvert digest.
Filtre, der injiceres på denne måde, er stadig registreret på modulet, så et brugerdefineret filter skal deklareres med app.filter før nogen controller spørger $filter for det. Ellers giver AngularJS en ukendt providerfejl.
Indkaldelse af et filter JavaScriptet adskiller sig fra en skabelon på én vigtig måde: resultatet beregnes én gang og gemmes i scopet i stedet for at blive genberegnet ved hvert digest. Det gør det til den hurtigere mulighed for en værdi, der sjældent ændres, og den forkerte mulighed for en, der skal... track brugerinput.
