AngularJS - Filtres : Votre Guide Amical pour la Transformation des Données

Salut là, future star du codage ! ? Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte des filtres AngularJS. Ne vous inquiétez pas si vous êtes nouveau dans le monde de la programmation - je vais être avec vous, expliquant tout étape par étape. À la fin de ce tutoriel, vous filtrerez les données comme un pro !

Qu'est-ce que les Filtres dans AngularJS ?

Avant de plonger dans les détails, comprenstons ce qu'est un filtre. Imaginez que vous avez une baguette magique qui peut transformer instantanément les données. C'est essentiellement ce que font les filtres dans AngularJS ! Ils prennent vos données et les présentent dans un format différent sans modifier les données d'origine. Génial, non ?

Maintenant, explorons certains des filtres les plus couramment utilisés dans AngularJS.

Filtre Majuscule : Mettre en Valeur la Grandeur

Ce qu'il Fait

Le filtre majuscule fait exactement ce que son nom suggère - il convertit tous les caractères d'une chaîne en majuscules.

Comment l'Utiliser

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

Sortie

HELLO, WORLD!

Explication

Dans cet exemple, nous partons de la chaîne en minuscules "hello, world!". Le symbole | est comme un tuyau magique qui envoie notre texte à travers le filtre majuscule. Le résultat ? Un "HELLO, WORLD!" en plein dans la cible.

Filtre Minuscule : Garder la Discrétion

Ce qu'il Fait

Comme vous pourriez le deviner, le filtre minuscule fait l'inverse du filtre majuscule - il convertit tous les caractères en minuscules.

Comment l'Utiliser

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

Sortie

shout out to angularjs!

Explication

Ici, nous partons d'une chaîne en majuscules. Le filtre minuscule baisse le volume, nous donnant une version plus discrète "shout out to angularjs!".

Filtre Monétaire : Montre-moi l'Argent !

Ce qu'il Fait

Le filtre monétaire formate un nombre en devise. Par défaut, il utilise le signe du dollar, mais vous pouvez le personnaliser.

Comment l'Utiliser

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

Sortie

$9.99
€9.99

Explication

Dans la première ligne, nous formatons 9.99 en dollars américains. Dans la seconde ligne, nous disons au filtre d'utiliser le symbole Euro à la place. Magique, n'est-ce pas ?

Filtre Filtre : Trouver des Aiguilles dans une Botte de Foin

Ce qu'il Fait

Le filtre... filtre (oui, c'est un peu confus !) vous aide à chercher dans des tableaux et à retourner les éléments correspondants.

Comment l'Utiliser

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

Sortie

John

Explication

Ici, nous cherchons dans notre tableau friends pour des noms contenant 'o'. Seul John correspond, donc il est le seul à être affiché.

Filtre Trie : Mettre les Choses en Ordre

Ce qu'il Fait

Le filtre orderBy trie un tableau en fonction d'un ou plusieurs critères.

Comment l'Utiliser

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

Sortie

John - 25
Mary - 28
Peter - 35

Explication

Dans cet exemple, nous trions nos amis par âge en ordre croissant. Si nous voulions l'ordre décroissant, nous pourrions utiliser '-age' à la place.

Mettre Tout Ensemble : Un Exemple Grandiose

Maintenant, combinons plusieurs filtres pour voir à quel point ils peuvent être puissants ensemble !

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

Explication

1. Nous partons d'un tableau de produits.
2. Nous créons un champ de saisie qui est lié à searchText en utilisant ng-model.
3. Dans notre tableau, nous utilisons ng-repeat pour itérer sur nos produits.
4. Nous appliquons le filtre filter pour chercher sur la base de searchText.
5. Ensuite, nous utilisons orderBy pour trier les résultats par prix.
6. Pour chaque produit, nous affichons le nom en majuscules et le prix formaté en devise.

Cet exemple combine la recherche, le tri et le formatage en un seul geste !

Conclusion

Félicitations ! Vous avez appena fait vos premiers pas dans le monde des filtres AngularJS. Souvenez-vous, les filtres sont comme le styliste personnel de vos données - ils aident à présenter vos informations de la manière la plus appropriée et la plus attrayante possible.

While you continue your journey with AngularJS, you'll discover even more ways to use filters to make your apps shine. Keep practicing, stay curious, and most importantly, have fun ! Before you know it, you'll be creating amazing web applications that will impress everyone.

Happy coding, future AngularJS master ! ?

Filtre	But	Syntaxe
uppercase	Convertit une chaîne en majuscules	{{ expression
lowercase	Convertit une chaîne en minuscules	{{ expression
currency	Formate un nombre en devise	{{ expression
filter	Sélectionne un sous-ensemble d'items d'un tableau	{{ tableau
orderBy	Trie un tableau en fonction d'une expression	{{ tableau

Credits: Image by storyset