AngularJS-filters en AngularJS aangepast filter met voorbeeld
James Hartman
Wat is filteren in AngularJS?
A Filteren in AngularJS helpt bij het opmaken van de waarde van een expressie zodat deze aan de gebruiker kan worden weergegeven zonder de oorspronkelijke opmaak te wijzigen. Als u uw tekenreeks bijvoorbeeld in kleine letters of hoofdletters wilt hebben, kunt u dit doen met behulp van filters. Er zijn ingebouwde filters zoals 'kleine letters' en 'hoofdletters', die de uitvoer van kleine en hoofdletters dienovereenkomstig kunnen ophalen.
Aangepast AngularJS-filter
Soms kunnen de ingebouwde filters in Angular niet voldoen aan de behoeften of vereisten voor het filteren van uitvoer. In een dergelijk geval kan een aangepast AngularJS-filter worden gemaakt, dat de uitvoer op de gewenste manier kan doorgeven.
Op dezelfde manier kunt u voor getallen andere filters gebruiken. Tijdens deze tutorial zullen we de verschillende standaard ingebouwde filters bekijken die beschikbaar zijn in Angular.
Hoe u een aangepast filter kunt maken in AngularJS
In het onderstaande AngularJS-voorbeeld met een aangepast filter gaan we een tekenreeks vanuit de controller via het scope-object naar de weergave doorgeven. We willen echter niet dat de tekenreeks wordt weergegeven zoals deze is.
We willen ervoor zorgen dat wanneer we de tekenreeks weergeven, we een aangepast filter doorgeven angularjs, waarmee nog een tekenreeks wordt toegevoegd en de voltooide tekenreeks aan de gebruiker wordt weergegeven.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.filter('Demofilter',function(){
return function(input)
{
return input + " Tutorial"
}
});
app.controller('DemoController',function($scope){
$scope.tutorial ="Angular";
});
</script>
</body>
</html>
Code Uitleg
- Hier geven we een string “Angular” door in een lidvariabele genaamd tutorial en koppelen deze aan het scope-object.
- Angular biedt de filterservice waarmee u ons aangepaste filter kunt maken. Het 'Demofilter' is een naam die aan ons filter wordt gegeven.
- Dit is de standaardmanier waarop aangepaste filters in AngularJS worden gedefinieerd waarin een functie wordt geretourneerd. Deze functie bevat de aangepaste code om het aangepaste filter te maken. In onze functie nemen we een string “Angular” die vanuit onze weergave naar het filter wordt doorgegeven en voegen we hieraan de string “Tutorial” toe.
- We gebruiken ons Demofilter op onze lidvariabele die van de controller naar de weergave is doorgegeven.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- Het is te zien dat ons aangepaste filter is toegepast en
- Het woord 'Tutorial' is toegevoegd aan het einde van de string, die is doorgegeven in de tutorial voor lidvariabelen.
Filter voor kleine letters in AngularJS
Dit filter neemt een tekenreeksuitvoer over, formatteert de tekenreeks en geeft alle tekens in de tekenreeks weer als kleine letters.
Laten we een voorbeeld bekijken van AngularJS-filters met de optie AngularJS naar kleine letters.
In het onderstaande voorbeeld gebruiken we een controller om een string naar een weergave te sturen via het scope-object. Vervolgens gebruiken we een filter in de weergave om de tekenreeks naar kleine letters te converteren.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName | lowercase}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialName ="Angular JS";
});
</script>
</body>
</html>
Code Uitleg
- Hier geven we een tekenreeks door, een combinatie van kleine en hoofdletters in een lidvariabele genaamd "tutorialName", en koppelen deze aan het scope-object. De waarde van de doorgegeven string is “AngularJS”.
- We gebruiken de lidvariabele “tutorialName” en plaatsen een filtersymbool (|), wat betekent dat de uitvoer moet worden gewijzigd door een filter te gebruiken. Vervolgens gebruiken we het trefwoord kleine letters om te zeggen dat we het ingebouwde filter moeten gebruiken om de hele tekenreeks in kleine letters uit te voeren.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer
- Het is te zien dat de string “AngularJS” die werd doorgegeven in de variabele tutorialName, die een combinatie was van kleine letters en hoofdletters, is uitgevoerd.
- Na uitvoering is de uiteindelijke uitvoer in kleine letters, zoals hierboven weergegeven.
Filter voor hoofdletters in AngularJS
Dit filter is vergelijkbaar met het kleine letterfilter; het verschil is dat het een tekenreeksuitvoer aanneemt en de tekenreeks opmaakt en alle tekens in de tekenreeks als hoofdletters weergeeft.
Laten we eens kijken naar een voorbeeld van het hoofdletterfilter AngularJS met de optie voor kleine letters.
In het onderstaande AngularJS-voorbeeld met hoofdletters gebruiken we een controller om een string naar een weergave te sturen via het scope-object. Vervolgens gebruiken we een filter in de weergave om de tekenreeks naar hoofdletters te converteren.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName | uppercase}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialName ="Angular JS";
});
</script>
</body>
</html>
Code Uitleg
- Hier geven we een string door die een combinatie is van kleine letters en hoofdletters “Angular JS” in een lidvariabele genaamd “tutorialName” en koppelen deze aan het scope-object.
- We gebruiken de lidvariabele “tutorialName” en plaatsen een filtersymbool (|), wat betekent dat de uitvoer moet worden gewijzigd door een filter te gebruiken. Vervolgens gebruiken we het trefwoord in hoofdletters om te zeggen dat we het ingebouwde filter moeten gebruiken om de hele tekenreeks in hoofdletters uit te voeren.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- Het is te zien dat de string die werd doorgegeven in de variabele tutorialName, die een combinatie was van kleine letters en hoofdletters, geheel in hoofdletters werd uitgevoerd.
Nummerfilter in AngularJS
Dit filter formatteert een getal en kan een limiet toepassen op de decimalen van een getal.
Laten we een voorbeeld bekijken van AngularJS-filters met de nummeroptie.
In het onderstaande voorbeeld
We wilden laten zien hoe we het getalfilter kunnen gebruiken om een getal op te maken zodat het wordt weergegeven met een beperking van twee decimalen.
We zullen een controller gebruiken om via het scope-object een getal naar een weergave te sturen. We zullen dan een filter in de weergave gebruiken om het nummerfilter toe te passen.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialID =3.565656;
});
</script>
</body>
</html>
Code Uitleg
- Hier geven we een getal met een groter aantal decimalen door in een lidvariabele genaamd tutorialID en koppelen dit aan het scope-object.
- We gebruiken de lidvariabele tutorialID en plaatsen een filtersymbool (|) samen met het nummerfilter. Nu in getal:2 geven de twee aan dat het filter het aantal decimalen moet beperken tot 2.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- Het is te zien dat het getal dat werd doorgegeven in de variabele tutorialID die een groot aantal decimalen had, beperkt is tot 2 decimalen vanwege het aantal: 2 filters dat werd toegepast.
Valutafilter in AngularJS
Dit filter formatteert een valutafilter naar een getal.
Stel dat u een getal met een valuta zoals $ wilt weergeven, dan kunt u dit filter gebruiken.
In het onderstaande voorbeeld gebruiken we een controller om een getal naar een weergave te sturen via het scope-object. We zullen dan een filter in de weergave gebruiken om het huidige filter toe te passen.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialprice =20.56;
});
</script>
</body>
</html>
Code Uitleg
- Hier geven we een getal door in een lidvariabele genaamd tutorialprice en koppelen dit aan het scope-object.
- We gebruiken de lidvariabele tutorialprice en plaatsen een filtersymbool (|) samen met het valutafilter. Houd er rekening mee dat de valuta die wordt toegepast afhankelijk is van de taalinstellingen die op de machine worden toegepast.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer
- U kunt zien dat het valutasymbool is toegevoegd aan het getal dat is doorgegeven in de variabele tutorialprice.
- In ons geval wordt, omdat de taalinstellingen Engels (Verenigde Staten) zijn, het $-symbool als valuta ingevoegd.
JSON-filter in AngularJS
Dit filter formatteert a JSON like input en past het AngularJS JSON-filter toe om de output in JSON te geven.
In het onderstaande voorbeeld gebruiken we een controller om een JSON-type object naar een weergave te sturen via het scope-object. We zullen dan een filter in de weergave gebruiken om het JSON-filter toe te passen.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
});
</script>
</body>
</html>
Code Uitleg
- Hier geven we een getal door in een lidvariabele genaamd “tutorial” en koppelen dit aan het scope-object. Deze lidvariabele bevat een tekenreeks van het JSON-type Tutorial ID:12 en TutorialName:”Angular”.
- We gebruiken de tutorial over lidvariabelen en plaatsen een filtersymbool (|) samen met het JSON-filter.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- U kunt zien dat de JSON als een string wordt geparseerd en als een correct JSON-object in de browser wordt weergegeven.
Samenvatting
- Met filters kunt u de manier wijzigen waarop de uitvoer aan de gebruiker wordt weergegeven.
- Angular biedt ingebouwde filters, zoals de filters voor kleine letters en hoofdletters, om de uitvoer van tekenreeksen respectievelijk te wijzigen in kleine letters en hoofdletters.
- Er is ook een voorziening om de manier waarop getallen worden weergegeven te wijzigen met behulp van het getallenfilter. U kunt dan opgeven hoeveel decimalen er in het getal moeten worden weergegeven.
- U kunt ook het valutafilter gebruiken om het valutasymbool aan elk getal toe te voegen.
- Als er een vereiste is om JSON-specifieke uitvoer te hebben, biedt angular ook het JSON-filter voor het filteren van elke JSON-achtige tekenreeks in JSON-indeling.
- Als er een vereiste is waaraan niet wordt voldaan door een van de filters die in angular zijn gedefinieerd, kunt u uw aangepaste filter maken en uw aangepaste code toevoegen om het gewenste type uitvoer van het filter te bepalen.