AngularJS Filters

Je kunt filters toevoegen in AngularJS om gegevens te formatteert.

AngularJS Filters

AngularJS biedt filters aan om gegevens te converteren:

• currency Formateer een nummer naar een valuta-opmaak
• date Formateer een datum in een specifieke opmaak
• filter Selecteer een subset uit een array
• json Formateer een object naar een JSON-tekenreeks
• limitTo Beperk een array/tekenreeks tot een specifieke hoeveelheid elementen/tekens
• lowercase Een string in kleine letters formatteert
• number Formateer een nummer naar een string
• orderBy Sorteer een array met behulp van een expressie
• uppercase Een string in HOOFDLETTERS formatteert

Een filter toevoegen aan een expressie

Je kunt een pipe-teken | gebruiken om een filter aan een expressie toe te voegen, gevolgd door een filter.

uppercase De filter formatteert een string in HOOFDLETTERS:

Voorbeeld

<div ng-app="myApp" ng-controller="personCtrl">
<p>Naam is {{ lastName | uppercase }}</p>
</div>

Try It Yourself

lowercase De filter formatteert een string in kleine letters:

Voorbeeld

<div ng-app="myApp" ng-controller="personCtrl">
<p>De naam is {{ lastName | lowercase }}</p>
</div>

Try It Yourself

Voeg een filter toe aan een opdracht

Door het gebruik van het pip-teken | gevolgd door een filter, je kunt een filter toevoegen aan een opdracht, bijvoorbeeld ng-repeat：

Voorbeeld

orderBy filter sorteert de array:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Try It Yourself

currency filter

currency Filters formatteren cijfers als valuta:

Voorbeeld

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Prijs: {{ price | currency }}</h1>
</div>

Try It Yourself

Meer informatie over de currency filter, raadpleeg ons AngularJS currency referentiemanual.

filter filter

filter Filters kiezen een subset van de array.

filter Filters kunnen alleen worden gebruikt met arrays, ze retourneren een array die alleen overeenkomende items bevat.

Voorbeeld

Retourneer de namen die het letter "i" bevatten:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Try It Yourself

Meer informatie over de filter-filter, raadpleeg ons AngularJS filter referentiemanual.

Filter de array op basis van de invoer van de gebruiker

Door het invoerveld in te stellen ng-model Opdracht, we kunnen de waarde van het invoerveld gebruiken als een expressie in de filter.

Voer een letter in in het invoerveld, de lijst wordt geschrapt/uitgebreid op basis van de overeenkomst:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• 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>

Try It Yourself

Sorteer de array op basis van de invoer van de gebruiker

Klik op de tabelkop om de volgorde te wijzigen:

Door een tabelkop toe te voegen ng-click Opdracht, we kunnen een functie uitvoeren die de volgorde van de array wijzigt:

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>

Try It Yourself

Aangepaste filter

U kunt een nieuwe filter-fabrieksfunctie registreren in het module om een eigen filter te maken:

Voorbeeld

Maak een aangepaste filter genaamd "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>

Try It Yourself

myFormat Filters will capitalize every other character.