AngularJS-filters
Filters kunnen in AngularJS worden toegevoegd om gegevens op te maken.
AngularJS-filters
AngularJS biedt filters om gegevens te transformeren:
currencyMaak een getal op in een valutaformaat.dateFormatteer een datum naar een opgegeven formaat.filterSelecteer een subset van items uit een array.jsonFormatteer een object naar een JSON-tekenreeks.limitToBeperkt een array/string tot een gespecificeerd aantal elementen/tekens.lowercaseMaak een tekenreeks op in kleine letters.numberMaak een getal op tot een tekenreeks.orderBySorteert een array op een expressie.uppercaseMaak een tekenreeks op in hoofdletters.
Filters toevoegen aan uitdrukkingen
Filters kunnen aan expressies worden toegevoegd door het pipe-teken te gebruiken |, gevolgd door een filter.
Het uppercasefilterformaat tekenreeksen naar hoofdletters:
Voorbeeld
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Het lowercasefilterformaat tekenreeksen naar kleine letters:
Voorbeeld
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Filters toevoegen aan richtlijnen
Filters worden toegevoegd aan richtlijnen, zoals ng-repeat, door het pipe-teken te gebruiken
|, gevolgd door een filter:
Voorbeeld
Het orderByfilter sorteert een array:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Het valutafilter
Het currencyfilter maakt een getal op als valuta:
Voorbeeld
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Lees meer over het valutafilter in onze AngularJS valutafilterreferentie
Het filterfilter
Het filterfilter selecteert een subset van een array.
Het filterfilter kan alleen op arrays worden gebruikt en retourneert een array met alleen de overeenkomende items.
Voorbeeld
Retourneer de namen die de letter "i" bevatten:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Lees meer over het filterfilter in onze AngularJS filter Filter Reference
Een array filteren op basis van gebruikersinvoer
Door de ng-modelrichtlijn op een invoerveld in te stellen, kunnen we de waarde van het invoerveld gebruiken als een uitdrukking in een filter.
Typ een letter in het invoerveld en de lijst zal krimpen/groeien afhankelijk van de overeenkomst:
- Jani
- Carl
- Margaretha
- Hege
- Joe
- Gustav
- Birgit
- Maria
- Kai
Voorbeeld
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Sorteer een array op basis van gebruikersinvoer
Klik op de tabelkoppen om de sorteervolgorde te wijzigen::
| Naam | Land |
|---|---|
| Jani | Noorwegen |
| Carl | Zweden |
| Margaretha | Engeland |
| Hege | Noorwegen |
| Joe | Denemarken |
| Gustav | Zweden |
| Birgit | Denemarken |
| Maria | Engeland |
| Kai | Noorwegen |
Door de ng-clickrichtlijn toe te voegen aan de tabelkoppen, kunnen we een functie uitvoeren die de sorteervolgorde van de array verandert:
Voorbeeld
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script>
Aangepaste filters
U kunt uw eigen filters maken door een nieuwe filterfabrieksfunctie bij uw module te registreren:
Voorbeeld
Maak een aangepast filter met de naam "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Het myFormatfilter maakt elk ander teken op in hoofdletters.