AngularJS-Filter
Filter können in AngularJS hinzugefügt werden, um Daten zu formatieren.
AngularJS-Filter
AngularJS bietet Filter zum Transformieren von Daten:
currencyFormatieren Sie eine Zahl in ein Währungsformat.dateFormatieren Sie ein Datum in einem bestimmten Format.filterWählen Sie eine Teilmenge von Elementen aus einem Array aus.jsonFormatieren Sie ein Objekt in eine JSON-Zeichenfolge.limitToBeschränkt ein Array/eine Zeichenfolge auf eine bestimmte Anzahl von Elementen/Zeichen.lowercaseFormatieren Sie eine Zeichenfolge in Kleinbuchstaben.numberFormatieren Sie eine Zahl in eine Zeichenfolge.orderByOrdnet ein Array nach einem Ausdruck an.uppercaseFormatieren Sie eine Zeichenfolge in Großbuchstaben.
Hinzufügen von Filtern zu Ausdrücken
Filter können zu Ausdrücken hinzugefügt werden, indem das Pipe-Zeichen |gefolgt von einem Filter verwendet wird.
Das uppercaseFilterformat setzt auf Großbuchstaben:
Beispiel
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Der lowercaseFilter formatiert Zeichenfolgen in Kleinbuchstaben:
Beispiel
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Filter zu Direktiven hinzufügen
Filter werden Direktiven hinzugefügt, z. B. ng-repeat, indem das Pipe-Zeichen
|gefolgt von einem Filter verwendet wird:
Beispiel
Der orderByFilter 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>
Der Währungsfilter
Der currencyFilter formatiert eine Zahl als Währung:
Beispiel
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Lesen Sie mehr über den Währungsfilter in unserer AngularJS-Währungsfilter-Referenz
Der Filter Filter
Der filterFilter wählt eine Teilmenge eines Arrays aus.
Der filterFilter kann nur für Arrays verwendet werden und gibt ein Array zurück, das nur die übereinstimmenden Elemente enthält.
Beispiel
Geben Sie die Namen zurück, die den Buchstaben "i" enthalten:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Lesen Sie mehr über den Filterfilter in unserer AngularJS-Filterfilter-Referenz
Filtern Sie ein Array basierend auf Benutzereingaben
Indem wir die ng-modelDirektive auf ein Eingabefeld setzen, können wir den Wert des Eingabefelds als Ausdruck in einem Filter verwenden.
Geben Sie einen Buchstaben in das Eingabefeld ein, und die Liste wird je nach Übereinstimmung kleiner/größer:
- Jani
- Carl
- Margareth
- Hege
- Jo
- Gustav
- Birgit
- Maria
- Kai
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>
Sortieren Sie ein Array basierend auf Benutzereingaben
Klicken Sie auf die Tabellenüberschriften, um die Sortierreihenfolge zu ändern:
| Name | Land |
|---|---|
| Jani | Norwegen |
| Carl | Schweden |
| Margareth | England |
| Hege | Norwegen |
| Jo | Dänemark |
| Gustav | Schweden |
| Birgit | Dänemark |
| Maria | England |
| Kai | Norwegen |
Durch Hinzufügen der ng-clickDirektive zu den Tabellenköpfen 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>
Benutzerdefinierte Filter
Sie können Ihre eigenen Filter erstellen, indem Sie eine neue Filterfabrikfunktion mit Ihrem Modul registrieren:
Beispiel
Erstellen Sie einen benutzerdefinierten 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>
Der myFormatFilter formatiert jedes zweite Zeichen in Großbuchstaben.