AngularJS - Filtri: La Tua Guida Amica alla Trasformazione dei Dati

Ciao ciao, futuro supercampione del coding! ? Oggi, ci imbarcheremo in un viaggio emozionante nel mondo dei filtri di AngularJS. Non preoccuparti se sei nuovo alla programmazione - sarò qui con te, spiegando tutto passo per passo. Alla fine di questo tutorial, filtrerai i dati come un professionista!

Cos'è un Filtro in AngularJS?

Prima di addentrarci nei dettagli, capiremo cos'è un filtro. Immagina di avere una bacchetta magica che possa trasformare istantaneamente i dati. Ecco, i filtri in AngularJS fanno praticamente isso! Prendono i tuoi dati e li presentano in un formato diverso senza modificare i dati originali. Cool, vero?

Ora, esploriamo alcuni dei filtri più utilizzati in AngularJS.

Filtro Maiuscolo: Capitalizzare la Grandiosità

Cosa Fa

Il filtro maiuscolo fa esattamente quello che suggerisce - converte tutti i caratteri di una stringa in maiuscolo.

Come Usarlo

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

Output

HELLO, WORLD!

Spiegazione

In questo esempio, partiamo dalla stringa minuscola "hello, world!". Il simbolo | è come un tubo magico che invia il nostro testo attraverso il filtro maiuscolo. Il risultato? Un "HELLO, WORLD!" urlante e orgoglioso.

Filtro Minuscolo: tenere le cose tranquille

Cosa Fa

Come potresti immaginare, il filtro minuscolo fa l'opposto del maiuscolo - converte tutti i caratteri in minuscolo.

Come Usarlo

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

Output

shout out to angularjs!

Spiegazione

Qui, partiamo da una stringa tutta maiuscola. Il filtro minuscolo abbassa il volume, regalando una più sottile "shout out to angularjs!".

Filtro Valuta: Mostrami i Soldi!

Cosa Fa

Il filtro valuta formatta un numero come valuta. Per impostazione predefinita, utilizza il simbolo del dollaro, ma puoi personalizzarlo.

Come Usarlo

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

Output

$9.99
€9.99

Spiegazione

Nella prima riga, formattiamo 9.99 come dollari USA. Nella seconda riga, chiediamo al filtro di utilizzare il simbolo Euro invece. Magia, vero?

Filtro Filtrare: Trovare Ago nel Pagliaio

Cosa Fa

Il filtro... filtro (sì, è un po' confusionario!) ti aiuta a cercare attraverso array e restituire gli elementi corrispondenti.

Come Usarlo

<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>

Output

John

Spiegazione

Qui, stiamo cercando nel nostro array di amici i nomi che contengono 'o'. Solo John corrisponde, quindi è l'unico visualizzato.

Filtro Ordina: Mettere le Cose in Ordine

Cosa Fa

Il filtro orderBy ordina un array in base a uno o più criteri.

Come Usarlo

<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>

Output

John - 25
Mary - 28
Peter - 35

Spiegazione

In questo esempio, stiamo ordinando i nostri amici per età in ordine crescente. Se volessimo l'ordine decrescente, potremmo usare '-age' invece.

Mettere Tutto Insieme: Un Grande Esempio

Ora, combiniamo più filtri per vedere quanto possono essere potenti insieme!

<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>Price</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | uppercase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>

Spiegazione

1. Iniziamo con un array di prodotti.
2. Creiamo un campo di input che è legato a searchText usando ng-model.
3. Nel nostro tableau, usiamo ng-repeat per iterare sui nostri prodotti.
4. Applichiamo il filtro filter per cercare in base a searchText.
5. Poi usiamo orderBy per ordinare i risultati per prezzo.
6. Per ogni prodotto, mostriamo il nome in maiuscolo e il prezzo formattato come valuta.

Questo esempio combina ricerca, ordinamento e formattazione tutto in una volta sola!

Conclusione

Congratulazioni! Hai appena fatto i tuoi primi passi nel mondo dei filtri di AngularJS. Ricorda, i filtri sono come lo stilista personale dei tuoi dati - aiutano a presentare le tue informazioni nel modo più appropriato e attraente possibile.

Mentre continui il tuo viaggio con AngularJS, scoprirai sempre più modi di usare i filtri per rendere le tue app lucenti. Continua a esercitarti, rimani curioso e, soprattutto, divertiti! Prima di sapere, sarai un maestro di AngularJS.

Buon coding, futuro maestro di AngularJS! ?

Filtro	Scopo	Sintassi
uppercase	Converte stringa in maiuscolo	{{ espressione
lowercase	Converte stringa in minuscolo	{{ espressione
currency	Formatta numero come valuta	{{ espressione
filter	Seleziona sottoinsieme di elementi da array	{{ array
orderBy	Ordina array in base a espressione	{{ array

Credits: Image by storyset