AngularJS - Filtern: Dein freundlicher Guide zur Datenwandlung

Hallo da, zukünftiger Codingsuperstar! ? Heute machen wir uns auf eine aufregende Reise in die Welt der AngularJS-Filter. Keine Sorge, wenn du neu im Programmieren bist – ich bin hier, um dich Schritt für Schritt zu begleiten. Am Ende dieses Tutorials wirst du Daten wie ein Profi filtern können!

Was sind Filter in AngularJS?

Bevor wir uns in die Details vertiefen, lassen wir uns erst einmal anschauen, was Filter sind. Stell dir vor, du hast einen magischen Zauberstab, der Daten sofort transformieren kann. Das ist im Wesentlichen, was Filter in AngularJS tun! Sie nehmen deine Daten und präsentieren sie in einem anderen Format, ohne die ursprünglichen Daten zu ändern. Cool, oder?

Nun, lassen uns einige der am häufigsten verwendeten Filter in AngularJS erkunden.

Großschreibung Filter: Großartigkeit betonen

Was es macht

Der Großschreibung Filter doet genau das, was der Name vermuten lässt – er konvertiert alle Zeichen in einer Zeichenkette in Großbuchstaben.

Wie man es verwendet

<p>{{ "hello, world!" | uppercase }}</p>

Ausgabe

HELLO, WORLD!

Erklärung

In diesem Beispiel beginnen wir mit der Kleinbuchstaben-Zeichenkette "hello, world!". Das | Symbol ist wie ein magischer Schlauch, der unseren Text durch den Großschreibung Filter schickt. Das Ergebnis? Ein laut und stolz "HELLO, WORLD!".

Kleinbuchstaben Filter: Unauffällig bleiben

Was es macht

Wie du vielleicht vermuten kannst, macht der Kleinbuchstaben Filter das Gegenteil der Großschreibung – er konvertiert alle Zeichen in Kleinbuchstaben.

Wie man es verwendet

<p>{{ "SHOUT OUT TO ANGULARJS!" | lowercase }}</p>

Ausgabe

shout out to angularjs!

Erklärung

Hier beginnen wir mit einer Großbuchstaben-Zeichenkette. Der Kleinbuchstaben Filter senkt die Lautstärke, indem er uns eine unauffälligere "shout out to angularjs!" gibt.

Währung Filter: Zeige mir das Geld!

Was es macht

Der Währung Filter formatiert eine Zahl als Währung. Standardmäßig verwendet er das Dollar-Zeichen, aber du kannst es anpassen.

Wie man es verwendet

<p>{{ 9.99 | currency }}</p>
<p>{{ 9.99 | currency:"€" }}</p>

Ausgabe

$9.99
€9.99

Erklärung

In der ersten Zeile formatieren wir 9.99 als US-Dollar. In der zweiten Zeile weisen wir dem Filter an, das Euro-Symbol zu verwenden. Magie, nicht wahr?

Filter Filter: Nadeln im Heuhaufen finden

Was es macht

Der Filter... Filter (ja, es ist ein bisschen verwirrend!) hilft dir, durch Arrays zusuchen und übereinstimmende Elemente zurückzugeben.

Wie man es verwendet

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | filter:{name:'o'}">
{{friend.name}}
</li>

Ausgabe

John

Erklärung

Hier suchen wir unser Freunde-Array nach Namen, die 'o' enthalten. Nur John passt,also wird nur er angezeigt.

OrderBy Filter: Dinge in Ordnung bringen

Was es macht

Der orderBy Filter sortiert ein Array basierend auf einem oder mehreren Kriterien.

Wie man es verwendet

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | orderBy:'age'">
{{friend.name}} - {{friend.age}}
</li>

Ausgabe

John - 25
Mary - 28
Peter - 35

Erklärung

In diesem Beispiel sortieren wir unsere Freunde nach Alter in aufsteigender Reihenfolge. Wenn wir absteigende Reihenfolge wollten, könnten wir -age verwenden.

Alles zusammen: Ein großes Beispiel

Nun kombinieren wir mehrere Filter, um zu sehen, wie mächtig sie zusammen sein können!

<script>
$scope.products = [
{name:'Laptop', price:999.99},
{name:'Smartphone', price:599.99},
{name:'Tablet', price:299.99}
];
</script>

<input type="text" ng-model="searchText">
<table>
<tr>
<th>Name</th>
<th>Preis</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | uppercase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>

Erklärung

1. Wir beginnen mit einem Array von Produkten.
2. Wir erstellen ein Eingabefeld, das mit searchText über ng-model verknüpft ist.
3. In unserer Tabelle verwenden wir ng-repeat, um über unsere Produkte zu iterieren.
4. Wir wenden den filter Filter an, um basierend auf searchText zu suchen.
5. Dann verwenden wir orderBy, um die Ergebnisse nach Preis zu sortieren.
6. Für jedes Produkt显示显示名称 in Großbuchstaben und den Preis in Währung formatiert.

Dieses Beispiel kombiniert Suchen, Sortieren und Formatieren alles in einem!

Fazit

Herzlichen Glückwunsch! Du hast gerade deine ersten Schritte in die Welt der AngularJS-Filter gemacht. Denke daran, Filter sind wie der persönliche Stylist deiner Daten – sie helfen, deine Informationen auf die am besten geeignete und attraktivste Weise zu präsentieren.

Während du deine Reise mit AngularJS fortsetzt, wirst du noch mehr Möglichkeiten entdecken, Filter zu verwenden, um deine Apps zu verschönern. Halte dich an das Üben, bleib neugierig und vor allem, habe Spaß! Bevor du es merkst, wirst du erstaunliche Webanwendungen erstellen, die jeden beeindrucken werden.

Happy Coding, zukünftiger AngularJS-Meister! ?

Filter	Zweck	Syntax
uppercase	Konvertiert eine Zeichenkette in Großbuchstaben	{{ Ausdruck
lowercase	Konvertiert eine Zeichenkette in Kleinbuchstaben	{{ Ausdruck
currency	Formatiert eine Zahl als Währung	{{ Ausdruck
filter	Wählt eine Teilmenge von Elementen aus einem Array aus	{{ Array
orderBy	Sortiert ein Array nach einem Ausdruck	{{ Array

Credits: Image by storyset