AngularJS-filtre og AngularJS-tilpasset filter med eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ 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.

  • 🧾 Kerneprincip: Et filter transformerer kun det, som visningen viser; værdien, der er gemt på scope-objektet, ændres aldrig.
  • ➖ Rørsyntaks: Den lodrette streg adskiller udtrykket fra filternavnet, og et kolon sender et argument til det.
  • 🔤 Sagfiltre: Små og store bogstaver konverterer en streng til visning, og der findes ikke et filter for store bogstaver i AngularJS.
  • 🔢 Nummer og valuta: tal begrænser decimaler, mens valuta sætter et lokalitetsdrevet symbol foran værdien.
  • 🛠️ Tilpassede filtre: Registrering af en fabrik, der returnerer en funktion, opretter et genbrugeligt filter, der er tilgængeligt på tværs af hele modulet.
  • ⚡ Renhed betyder noget: Et filter skal returnere det samme output for det samme input, fordi AngularJS cacher resultater og springer genkørsel af rene filtre over.
Læs mere

AngularJS-filtre og brugerdefinerede filtre

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.

Filter med små bogstaver i AngularJS

<!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

  1. Strengen "Angular JS" med blandede bogstaver placeres i en medlemsvariabel kaldet tutorialName på omfangsobjektet.
  2. Filtersymbolet (|) markerer outputtet til transformation, og lowercase Nø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:

Filter med små bogstaver i AngularJS

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.

Stort filter i AngularJS

<!-- 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

  1. Strengen "Angular JS" med blandede store og små bogstaver placeres i tutorialName og knyttet til scope-objektet.
  2. Filtersymbolet (|) efterfølges af uppercase nø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:

Stort filter i AngularJS

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.

Nummerfilter i AngularJS

<!-- 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

  1. Et tal med mange decimaler placeres i en medlemsvariabel kaldet tutorialID og knyttet til scope-objektet.
  2. 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:

Nummerfilter i AngularJS

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.

RELATEREDE ARTIKLER

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.

Valutafilter i AngularJS

<!-- 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

  1. Et tal placeres i en medlemsvariabel kaldet tutorialprice og knyttet til scope-objektet.
  2. Filtersymbolet (|) efterfølges af currency filter.

⚠️ 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:

Valutafilter i AngularJS

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.

JSON-filter i AngularJS

<!-- 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

  1. En genstand, der holder TutorialID: 12 og tutorialName: "Angular" placeres i en medlemsvariabel kaldet tutorial og knyttet til scope-objektet.
  2. Filtersymbolet (|) efterfølges af json filter, 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:

JSON-filter i AngularJS

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.

Opret brugerdefineret filter i AngularJS

<!-- 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

  1. Strengen "Angular" placeres i en medlemsvariabel kaldet tutorial og knyttet til scope-objektet.
  2. AngularJS leverer filter registreringsmetode, der bruges til at oprette et brugerdefineret filter. 'Demofilter' er navnet, og det er det navn, visningen refererer til.
  3. 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.
  4. 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:

Opret brugerdefineret filter i AngularJS

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.

Ofte Stillede Spørgsmål

Nej. AngularJS leverer kun små og store bogstaver. Stort første bogstav i hvert ord kræver et brugerdefineret filter, der opdeler strengen og genopbygger den, eller en CSS teksttransformeringsregel, hvis ændringen udelukkende er visuel.

Filteret er registreret på et andet modul end det, der bootstrappes af ng-app, eller scriptet, der definerer det, kører, før AngularJS indlæses. Registrer filteret på det samme modul, og indlæs biblioteket først.

Ja. Piping en samling indeni ng-gentag filtrerer eller ordner elementerne, før de gengives. Filteret modtager hele arrayet og skal returnere et array.

Ja. AI Assistenterne producerer fabrikken, den returnerede funktion og view-syntaksen ud fra en simpel beskrivelse af formateringsreglen. Kontroller, at det genererede filter beskytter mod udefineret input.

AI-værktøjer omskriver fabrikken som en klasse, der implementerer PipeTransform, og flytter hver ekstra parameter ind i transform-metoden. RevSe ethvert $stateful-filter manuelt, fordi urene pipes skal deklareres eksplicit.

Opsummer dette indlæg med: