Vad är filter i AngularJS?
Ett filter i AngularJS hjälper till att formatera värdet på ett uttryck som ska visas för användaren utan att ändra originalformatet. Om du till exempel vill ha din sträng i gemener eller versaler kan du göra det med filter. Det finns inbyggda filter som "gemener", "versaler", som kan hämta små och stora utdata därefter.
På samma sätt kan du använda andra filter för siffror.
Under denna handledning ser vi de olika inbyggda standardfiltren som finns tillgängliga i Angular.
I den här handledningen lär du dig-
- Småfilter i AngularJS
- Huvudfilter i AngularJS
- Nummerfilter i AngularJS
- Valutafilter i AngularJS
- JSON-filter i AngularJS
Småfilter i AngularJS
Detta filter tar på sig en strängutmatning och formaterar strängen och visar alla tecken i strängen som gemener.
Låt oss titta på ett exempel på AngularJS-filter med alternativet AngularJS tolowercase.
I exemplet nedan använder vi en styrenhet för att skicka en sträng till en vy via scope-objektet. Vi använder sedan ett filter i vyn för att konvertera strängen till gemener.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Kodförklaring:
- Här skickar vi en sträng, som är en kombination av gemener och versaler i en medlemsvariabel som heter "tutorialName" och fäster den till scope-objektet. Värdet på strängen som skickas är "AngularJS".
- Vi använder medlemsvariabeln "tutorialName" och sätter en filtersymbol (|) vilket innebär att utdata måste modifieras med hjälp av ett filter. Vi använder sedan gemener för att säga att använda det inbyggda filtret för att mata ut hela strängen i gemener.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen
- Det kan ses att strängen "AngularJS" som skickades i variabeln tutorialName som var en kombination av gemener och versaler har körts.
- Efter körning är den slutliga utgången i gemener som visas ovan.
Huvudfilter i AngularJS
Det här filtret liknar det små bokstäverna; skillnaden är att tar på en strängutmatning och formaterar strängen och visar alla tecken i strängen som versaler.
Låt oss titta på ett exempel på att kapitalisera filtret AngularJS med gemeneralternativet.
I nedanstående exempel på AngularJS-versaler använder vi en styrenhet för att skicka en sträng till en vy via scope-objektet. Vi använder sedan ett filter i vyn för att konvertera strängen till versaler.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Kodförklaring:
- Här skickar vi en sträng som är en kombination av gemener och versaler "Angular JS" i en medlemsvariabel som heter "tutorialName" och fäster den till scope-objektet.
- Vi använder medlemsvariabeln "tutorialName" och sätter en filtersymbol (|), vilket innebär att utgången måste modifieras med hjälp av ett filter. Vi använder sedan det versala nyckelordet för att säga att använda det inbyggda filtret för att mata ut hela strängen i versaler.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan ses att strängen som skickades i variabeln tutorialName som var en kombination av gemener och versaler har matats ut i alla versaler.
Nummerfilter i AngularJS
Detta filter formaterar ett tal och kan tillämpa en gräns på decimaler för ett nummer.
Låt oss titta på ett exempel på AngularJS-filter med nummeralternativet.
I exemplet nedan,
Vi ville visa hur vi kan använda nummerfiltret för att formatera ett nummer som ska visas med en begränsning på två decimaler.
Vi använder en styrenhet för att skicka ett nummer till en vy via scope-objektet. Vi använder sedan ett filter i vyn för att tillämpa nummerfiltret.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Kodförklaring:
- Här skickar vi ett nummer med ett större antal decimaler i en medlemsvariabel som kallas tutorialID och fäster det till scope-objektet.
- Vi använder medlemsvariabel tutorialID och sätter en filtersymbol (|) tillsammans med nummerfiltret. Nu i antal: 2 indikerar de två att filtret ska begränsa antalet decimaler till 2.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan ses att antalet som skickades i variabeln tutorialID som hade ett stort antal decimaler har begränsats till 2 decimaler på grund av antalet: 2 filter som applicerades.
Valutafilter i AngularJS
Detta filter formaterar ett valutafilter till ett nummer.
Antag att om du vill visa ett nummer med en valuta som $, kan detta filter användas.
I exemplet nedan använder vi en styrenhet för att skicka ett nummer till en vy via scope-objektet. Vi använder sedan ett filter i vyn för att tillämpa det aktuella filtret.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Kodförklaring:
- Här skickar vi ett nummer i en medlemsvariabel som kallas tutorialprice och fäster det till scope-objektet.
- Vi använder medlemsvariabeln tutorialpris och sätter en filtersymbol (|) tillsammans med valutafiltret. Observera att valutan som används beror på vilka språkinställningar som tillämpas på maskinen.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen
- Det kan ses att valutasymbolen har lagts till numret som skickades i den variabla tutorialprisen.
- I vårt fall, eftersom språkinställningarna är engelska (USA), införs symbolen $ som valuta.
JSON-filter i AngularJS
Detta filter formaterar en JSON-liknande ingång och tillämpar AngularJS JSON-filtret för att ge utdata i JSON.
I exemplet nedan använder vi en styrenhet för att skicka ett JSON-objekt till en vy via scope-objektet. Vi använder sedan ett filter i vyn för att tillämpa JSON-filtret.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Kodförklaring:
- Här skickar vi ett nummer i en medlemsvariabel som heter "tutorial" och bifogar det till scope-objektet. Denna medlemsvariabel innehåller en JSON-typsträng av självstudie-ID: 12 och handledningsnamn: "vinkel".
- Vi använder medlemsvariabelhandledningen och sätter en filtersymbol (|) tillsammans med JSON-filtret.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan ses att JSON som en sträng analyseras och visar ett korrekt JSON-objekt i webbläsaren.
Sammanfattning:
- Filter används för att ändra hur resultatet visas för användaren.
- Angular tillhandahåller inbyggda filter som små och stora filter för att ändra strängens utgång till lägre respektive versaler.
- Det finns också en möjlighet för att ändra hur siffror visas genom att använda nummerfiltret genom att ange antalet decimaler som ska visas i numret.
- Man kan också använda valutafiltret för att lägga till valutasymbolen till valfritt nummer.
- Om det finns krav på att ha json-specifik utdata tillhandahåller vinkel också JSON-filtret för att filtrera vilken JSON-liknande sträng som helst i JSON-format.