AngularJS-filter & AngularJS-anpassat filter med exempel

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

Ett filter i AngularJS formaterar värdet av ett uttryck för visning utan att ändra underliggande data. Inbyggda filter täcker skiftläge, tal, valuta och JSON, medan ett anpassat filter hanterar alla formateringsregler som ramverket inte redan tillhandahåller.

  • 🧾 Kärnprincip: Ett filter transformerar bara det som vyn visar; värdet som finns på scope-objektet ändras aldrig.
  • ➖ Rörsyntax: Det vertikala strecket separerar uttrycket från filternamnet, och ett kolon skickar ett argument till det.
  • 🔤 Fallfilter: gemener och versaler konverterar en sträng för visning, och inget versalfilter finns i AngularJS.
  • 🔢 Nummer och valuta: number begränsar decimaler, medan currency prefixar värdet med en språkstyrd symbol.
  • 🛠️ Anpassade filter: Att registrera en fabrik som returnerar en funktion skapar ett återanvändbart filter som är tillgängligt för hela modulen.
  • ⚡ Renhet spelar roll: Ett filter måste returnera samma utdata för samma indata, eftersom AngularJS cachar resultat och hoppar över att köra rena filter igen.
Läs mer

AngularJS-filter och anpassade filter

Vad är Filter i AngularJS?

A Filtrera i AngularJS hjälper till att formatera värdet på ett uttryck för visning till användaren utan att ändra det ursprungliga värdet. Om du till exempel vill att en sträng ska visas med antingen gemener eller versaler kan du göra det med hjälp av filter. Inbyggda filter som 'gemener' och 'versaler' returnerar strängen med önskat gemener eller versaler, och ytterligare filter finns för siffror, valuta och JSON.

⚠️ Versionsnotering: AngularJS (1.x-grenen) nådde slutet av sin livscykel den 31 december 2021 och får inga ytterligare säkerhetsuppdateringar. Allt nedan förblir korrekt för underhåll av befintliga AngularJS-applikationer; i moderna Angular fylls samma roll av en pipe.

Filter tillämpas i vyn med pipetecknet. Innan du tittar på vart och ett av dem är det bra att veta varför du skulle skriva ditt eget.

Filter med små bokstäver i AngularJS

Det här filtret tar en sträng och visar alla dess tecken med gemener.

Nedan skickar en kontroller en sträng till vyn via scope-objektet, och ett filter konverterar den till gemener.

Filter med små bokstäver 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 Förklaring

  1. Strängen "Angular JS" med blandade gemener och versaler placeras i en medlemsvariabel som heter tutorialName på omfattningsobjektet.
  2. Filtersymbolen (|) markerar utdata för transformation, och lowercase nyckelordet tillämpar det inbyggda filtret som återger hela strängen med gemener.

⚠️ Rättelser har tillämpats på varje annons. Alla sex originalexemplar delade tre defekter. chrset="UTF 8" är inte ett giltigt attribut eller en kodning, och är nu charset="UTF-8". angular-route.js laddad innan angular.min.js, vilket utlöser ett modulfel, och aldrig användes — den har tagits bort, liksom den oanvända jQuery-referensen. Texten påstod också att värdet var "AngularJS" medan koduppsättningen var "Angular JS"; texten matchar nu.

Produktion:

Filter med små bokstäver i AngularJS

Strängen med blandade gemener återges helt med gemener. Den motsatta omvandlingen fungerar på samma sätt.

Versalfilter i AngularJS

Det här filtret är motsvarigheten till gemenerfiltret och visar alla tecken som versaler.

Nedan skickar en kontroller en sträng till vyn via scope-objektet, och ett filter konverterar den till versaler.

Versalfilter 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 Förklaring

  1. Strängen "Angular JS" med blandade gemener och versaler placeras i tutorialName och kopplad till scope-objektet.
  2. Filtersymbolen (|) följs av uppercase nyckelord, så det inbyggda filtret återger hela strängen med versaler.

⚠️ Rättelse: Originalet introducerade detta avsnitt som "ett exempel på versalfiltret i AngularJS med gemener", vilket är fel två gånger. Detta avsnitt demonstrerar versalfiltret, och AngularJS har inget versalfilter alls – att bara använda den första bokstaven kräver ett anpassat filter, vilket de senare avsnitten visar hur man bygger.

Produktion:

Versalfilter i AngularJS

Skiftlägesfilter accepterar inga argument. Nästa filter visar hur ett kolon skickar en parameter till ett filter.

Nummerfilter i AngularJS

Det här filtret formaterar ett tal och kan begränsa hur många decimaler som visas.

Exemplet nedan använder talfiltret för att visa ett värde begränsat till två decimaler. En kontroller skickar talet till vyn via scope-objektet, och filtret tillämpas i vyn.

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 Förklaring

  1. Ett tal med många decimaler placeras i en medlemsvariabel som heter tutorialID och kopplad till scope-objektet.
  2. Filtersymbolen (|) följs av number:2Kolonet skickar ett argument, och 2:an anger två decimaler. Värdet avrundas för visning, så 3.565656 visas som 3.57 medan omfånget behåller hela talet.

Produktion:

Nummerfilter i AngularJS

Att formatera ett vanligt tal räcker ofta inte när värdet representerar pengar, vilket är vad nästa filter hanterar.

RELATERADE ARTIKLAR

Valutafilter i AngularJS

Det här filtret formaterar ett tal som ett valutavärde och sätter en valutasymbol, till exempel $, i prefix.

I exemplet nedan skickar en kontroller ett tal till vyn via scope-objektet, och valutafiltret tillämpas i vyn.

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 Förklaring

  1. Ett tal placeras i en medlemsvariabel som heter tutorialprice och kopplad till scope-objektet.
  2. Filtersymbolen (|) följs av currency filtrera.

⚠️ Rättelse: Originalet hävdade att valutan "beror på de språkinställningar som tillämpas på maskinen". Det gör den inte. AngularJS använder den språkinställning som medföljer biblioteket, en-US som standard, så symbolen är $ oavsett operativsystem. Ladda matchande angular-locale_*.js fil, eller skicka symbolen direkt: {{tutorialprice | currency:"£"}}.

Produktion:

Valutafilter i AngularJS

Strängar och tal är enkla värden. Det sista inbyggda filtret hanterar hela objekt.

JSON-filter i AngularJS

Det här filtret konverterar ett objekt till ett formaterat JSON sträng, vilket är användbart för att inspektera omfattningsdata under utveckling.

I exemplet nedan skickar en kontroller ett objekt till vyn via scope-objektet, och JSON-filtret tillämpas i vyn.

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 Förklaring

  1. Ett föremål som håller TutorialID: 12 och tutorialName: "Angular" placeras i en medlemsvariabel som heter tutorial och kopplad till scope-objektet.
  2. Filtersymbolen (|) följs av json filter, som serialiserar objektet till indenterad JSON-text.

⚠️ Rättelse: Originalet beskrev detta värde som "ett tal" och som "en sträng av JSON-typ". Det är varken det ena eller det andra. Det är en JavaSkriptobjektet, och json-filtret är det som konverterar det till en JSON-sträng för visning.

Produktion:

JSON-filter i AngularJS

Dessa fem filter täcker de vanligaste fallen. När inget av dem producerar den utdata du behöver skriver du ditt eget.

AngularJS anpassat filter

Ibland kan inte de inbyggda filtren i AngularJS uppfylla kraven för formatering av utdata. I sådana fall kan ett anpassat AngularJS-filter skapas, vilket returnerar utdata på önskat sätt.

Ett anpassat filter registreras på en modul och beter sig sedan exakt som ett inbyggt filter. Avsnitten nedan behandlar först standardfiltren, eftersom ett anpassat filter använder samma pipe-syntax, och visar sedan hur man bygger ett.

Hur man skapar anpassat filter i AngularJS

I exemplet nedan passerar en sträng från styrenhet till vyn via scope-objektet, men ska inte visas som det är. Ett anpassat filter i AngularJS lägger till en annan sträng och visar det färdiga resultatet.

Skapa anpassat 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 Förklaring

  1. Strängen ”Angular” placeras i en medlemsvariabel som heter tutorial och kopplad till scope-objektet.
  2. AngularJS tillhandahåller filter registreringsmetod som används för att skapa ett anpassat filter. 'Demofilter' är namnet som ges till det, och det namnet är vad vyn refererar till.
  3. Detta är standardformen för ett anpassat filter: den registrerade funktionen är en fabrik returnerar funktionen som utför arbetet. Den funktionen tar emot värdet som filtreras som sin första parameter och returnerar resultatet – här indata med ”Handledning” tillagd.
  4. Filtret tillämpas i vyn med samma pipe-syntax som alla inbyggda filter.

👍 Dricks: Filternamn är konventionellt gemener eller camelCase. 'Demofilter' fungerar, men ett namn som appendTutorial läses bättre och undviker krockar med ett inbyggt namn.

Produktion:

Skapa anpassat filter i AngularJS

Ordet 'Handledning' har lagts till i strängen som skickats i tutorial variabel. Det här filtret lägger alltid till samma text, vilket nästa avsnitt gör konfigurerbart.

Hur man skickar argument till ett anpassat filter

Filtret ovan hårdkodar texten det lägger till, så det kan bara göra en sak. Inbyggda filter som number:2 acceptera ett argument efter ett kolon, och ett anpassat filter kan också: varje parameter efter den första mappas till ett kolonseparerat argument i vyn.

Tre steg är involverade: lägg till parametrar efter input I den returnerade funktionen, ange en standardvärde för allt som är valfritt så att filtret fortfarande fungerar när argumentet utelämnas, skicka sedan argumenten i vyn separerade med 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;
  };
});

Vyn ser då ut som följer, där ”Handledning” blir suffix och bindestrecket blir separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Två detaljer är lätta att missa. Argument är AngularJS-uttryck, så en bokstavlig sträng måste citeras, medan ett ord utan citer läses som en scope-egenskap. Filter kedjas också, där varje filter tar emot utdata från det föregående: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Varning: Håll ett filter rent — samma utdata för samma indata, inga externa ändringar. AngularJS cachar ett rent filter och kör det bara igen när indata ändras. Ett filter som läser klockan eller muterar en tjänst måste markeras. $stateful, vilket inaktiverar cachningen och kör filtret vid varje sammanfattningscykel, en vanlig orsak till tröga sidor.

Filter är inte begränsade till mallar. Samma filter kan anropas från JavaManus, som visas härnäst.

Hur man använder filter i en kontroller med $filter-tjänsten

Att använda ett filter i vyn är vanligt förekommande, men det transformerade värdet behövs ibland inuti kontrollenheten, till exempel innan data skickas till en server. AngularJS exponerar alla registrerade filter, både inbyggda och anpassade, genom $filter service. Injicera den, anropa den med filternamnet för att hämta filterfunktionen och anropa sedan den med värdet och eventuella argument.

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 kortare form finns också: injicering av filternamnet följt av Filter, Såsom uppercaseFilter, tillhandahåller filterfunktionen direkt och den kan anropas omedelbart. Båda formerna resulterar i samma funktion, så valet är stilistiskt.

Två användningsområden dyker upp upprepade gånger. Den första är att förbereda en nyttolast: ett datum måste vanligtvis nå ett API i ett fast mönster, och $filter('date')(value, 'yyyy-MM-dd') producerar den utan att vidröra värdet som är bundet till formen. Det andra är att begränsa en samling en gång i kontrollenheten, snarare än att lämna orderBy i en ng-upprepa uttryck där det körs igen vid varje digest.

Filter som injiceras på detta sätt är fortfarande registrerade på modulen, så ett anpassat filter måste deklareras med app.filter innan någon kontrollant frågar $filter för det. Annars ger AngularJS ett okänd providerfel.

Anropa ett filter JavaSkript skiljer sig från en mall på ett viktigt sätt: resultatet beräknas en gång och lagras i omfånget snarare än att beräknas om vid varje sammanfattning. Det gör det till det snabbare alternativet för ett värde som sällan ändras, och fel alternativ för ett som måste ändras. track användarinmatning.

Vanliga frågor

Nej. AngularJS levererar endast gemener och versaler. Att skriva den första bokstaven i varje ord med versal kräver ett anpassat filter som delar upp strängen och bygger om den, eller en CSS-texttransformeringsregel om ändringen är rent visuell.

Filtret är registrerat på en annan modul än den som startats av ng-app, eller så körs skriptet som definierar det innan AngularJS laddas. Registrera filtret på samma modul och ladda biblioteket först.

Ja. Piping en samling inuti ng-upprepa filtrerar eller ordnar objekten innan de renderas. Filtret tar emot hela arrayen och måste returnera en array.

Ja. AI Assistenterna producerar fabriksfunktionen, den returnerade funktionen och vysyntaxen från en enkel beskrivning av formateringsregeln. Kontrollera att det genererade filtret skyddar mot odefinierad inmatning.

AI-verktyg skriver om fabriken som en klass som implementerar PipeTransform och flyttar varje extra parameter till transformmetoden. Revvisa alla $stateful-filter för hand, eftersom orena pipes måste deklareras explicit.

Sammanfatta detta inlägg med: