Neueste Web-Entwicklung Tutorials
 

AngularJS Filter

❮ Zurück Weiter Kapitel ❯

Filter können in AngularJS zu Formatdaten hinzugefügt werden.

AngularJS Filter

AngularJS bietet Filter Daten zu transformieren:

  • currency Format eine Nummer zu einem Währungsformat.
  • date Format ein Datum zu einem bestimmten Format.
  • filter Wählen Sie eine Teilmenge von Elementen aus einem Array.
  • json ein Objekt in einen JSON - String - Format.
  • limitTo Begrenzt ein Array / string, in eine bestimmte Anzahl von Elementen / Zeichen.
  • lowercase eine Zeichenfolge in Kleinbuchstaben.
  • number Format eine Zahl in einen String.
  • orderBy trägt ein Array durch einen Ausdruck.
  • uppercase eine Zeichenfolge in Großbuchstaben.

Hinzufügen von Filtern zu Expressions

Filter können durch die Verwendung der Pipe - Zeichen zu Ausdrücke hinzugefügt werden | , gefolgt von einem Filter.

Die uppercase Format - Strings in Großbuchstaben:

Beispiel

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
Versuch es selber "

Die lowercase Format - Strings in Kleinbuchstaben:

Beispiel

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
Versuch es selber "

Hinzufügen von Filtern zu Richtlinien

Die Filter werden zu Richtlinien hinzugefügt, wie ng-repeat , durch das Pipe - Zeichen mit | , gefolgt von einem Filter:

Beispiel

Die orderBy Filter sortiert ein Array:

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Versuch es selber "

Die Währung Filter

Die currency Filter formatiert eine Zahl als Währung:

Beispiel

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
Versuch es selber "

Lesen Sie mehr über die Währung Filter in unserem AngularJS Währung filtern Hinweis

Der Filter Filter

Der filter wählt eine Teilmenge eines Arrays.

Der filter Filter kann nur auf Arrays verwendet werden, und es gibt ein Array nur die passenden Teile enthält.

Beispiel

Bringen Sie die Namen, die den Buchstaben "i" enthält:

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Versuch es selber "

Lesen Sie mehr über den Filter Filter in unserem AngularJS Filter filtern Hinweis

Filter ein Array Basierend auf Benutzereingaben

Durch die Einstellung der ng-model Richtlinie über ein Eingabefeld, können wir den Wert des Eingabefeldes als Ausdruck in einem Filter verwenden.

Geben Sie einen Buchstaben in das Eingabefeld ein, und die Liste wird schrumpfen / wachsen auf dem Spiel abhängig:

  • {{X}}

Beispiel

<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>
Versuch es selber "

Sortiert ein Array Basierend auf Benutzereingaben

Klicken Sie auf die Tabellenüberschriften die Sortierreihenfolge zu ändern ::

Name Land
{{X.name}} {{X.country}}

Durch das Hinzufügen der ng-click - Richtlinie über die Tabellenüberschriften, können wir eine Funktion ausführen, die die Sortierreihenfolge des Arrays ändert:

Beispiel

<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>
Versuch es selber "

Benutzerdefinierte Filter

Sie können Ihre eigenen Filter durch die Registrierung eines neuen Filterfabrik Funktion mit Ihrem Modul machen:

Beispiel

Erstellen Sie eine benutzerdefinierte Filter namens "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>
Versuch es selber "

Die myFormat Filter formatiert jedes andere Zeichen in Großbuchstaben.


❮ Zurück Weiter Kapitel ❯