Explication détaillée de l'utilisation des filtres dans Angularjs_AngularJS

La fonction de Filter est de recevoir une entrée, de la traiter selon une certaine règle, puis de renvoyer le résultat traité à l'utilisateur. Le filtre peut être utilisé dans des modèles, des contrôleurs ou des services, et il est également facile de personnaliser un filtre.

Utiliser le filtre dans le modèle

Le filtre peut être utilisé dans les modèles de vue en utilisant l'expression syntaxique suivante :

{{ expression | filtre }}

Par exemple : le format {{ 12 | monnaie }} utilise le filtre de devise pour filtrer le nombre 12 sous forme de devise, et le résultat est 12,00 $.

Le filtre peut être appliqué aux résultats d'un autre filtre. C'est ce qu'on appelle le « chaînage » et s'utilise avec la syntaxe suivante :

{{ expression | filtre1 | filtre2 ... }}

Des paramètres peuvent être requis dans Filtre. La syntaxe est :

{{ expression | filtre:argument1:argument2:... }}

Par exemple : Le format {{ 1234 | number:2 }} utilise l'utilisation du filtre number pour filtrer le nombre 1234 en un nombre avec deux décimales. Le résultat est : 1 234,00.

Utiliser le filtre
dans les contrôleurs, les services et les directives

Vous pouvez utiliser des filtres dans les contrôleurs, les services et les directives.

Pour ce faire, vous devez injecter le nom de la dépendance dans votre contrôleur/service/directive : filter; par exemple : si un filtre est number, vous devez injecter numberFilter en utilisant la dépendance. Le paramètre injecté est une fonction qui prend une valeur comme premier paramètre puis utilise le deuxième paramètre pour filtrer les paramètres.

L'exemple suivant utilise un filtre appelé filtre. Ce filtre peut réduire les tableaux en fonction des sous-tableaux. Vous pouvez également appliquer un balisage dans le modèle de vue, comme : {{ctrl.array|filter:'a'}}, qui effectuera une recherche en texte intégral pour "a". Cependant, l'utilisation de filtres dans le modèle de vue filtrera à nouveau chaque filtre et si le tableau est relativement grand, il sera chargé plusieurs fois.

Donc, l'exemple suivant appelle directement le filtre dans le contrôleur. Grâce à cela, le contrôleur peut appeler le filtre en cas de besoin (par exemple : lorsque les données backend sont chargées ou que l'expression du filtre change).

index.html :

<div ng-controller="FilterController as ctrl">
 <div>
  All entries:
  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
 </div>
 <div>
  Entries that contain an "a":
  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
 </div>
</div>
 

script.js :

angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
 this.array = [
  {name: 'Tobias'},
  {name: 'Jeff'},
  {name: 'Brian'},
  {name: 'Igor'},
  {name: 'James'},
  {name: 'Brad'}
 ];
 this.filteredArray = filterFilter(this.array, 'a');
}]);

Le résultat est :

All entries: Tobias Jeff Brian Igor James Brad
Entries that contain an "a": Tobias Brian James Brad

Créer des filtres personnalisés :

Écrire votre propre filtre est très simple : il suffit d'enregistrer une nouvelle fonction d'usine de filtres dans votre module. En interne, filterProvider est utilisé ici. Cette fonction d'usine doit renvoyer une nouvelle fonction de filtre avec la valeur d'entrée comme premier argument. Tous les paramètres de filtre sont transmis en tant que paramètres supplémentaires à la fonction de filtre.

Cette fonction de filtre devrait être une fonction simple. Cela signifie qu’il devrait être apatride et idempotent. Lorsque la fonction d'entrée change, Angular s'appuie sur ces propriétés et exécute le filtre.

Remarque : le nom du filtre doit être un identifiant d'expression angulaire valide. Par exemple majuscule ou orderBy. Les caractères spéciaux ne sont pas autorisés dans le nom, tels que les tirets et les points. Si vous souhaitez que votre filtre soit doté d'un espace de noms, vous pouvez utiliser des majuscules (myappSubsectionFilterx) ou un trait de soulignement (myapp_subsection_filterx).

L'exemple de filtre suivant inverse une chaîne. De plus, il peut ajouter une condition pour mettre la chaîne en majuscule.

index.html

<div ng-controller="MyController">
 <input ng-model="greeting" type="text"><br>
 No filter: {{greeting}}<br>
 Reverse: {{greeting|reverse}}<br>
 Reverse + uppercase: {{greeting|reverse:true}}<br>
 Reverse, filtered in controller: {{filteredGreeting}}<br>
</div>
 

script.js

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
 return function(input, uppercase) {
  input = input || '';
  var out = "";
  for (var i = 0; i < input.length; i++) {
   out = input.charAt(i) + out;
  }
  // conditional based on optional argument
  if (uppercase) {
   out = out.toUpperCase();
  }
  return out;
 };
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
 $scope.greeting = 'hello';
 $scope.filteredGreeting = reverseFilter($scope.greeting);
}]);

Le résultat est :

No filter: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh

Filtres avec état

Il est fortement recommandé d'écrire des filtres avec état car ceux-ci ne peuvent pas être optimisés avec Angular, ce qui entraîne souvent des problèmes de performances. De nombreux filtres avec état sont convertis en filtres sans état simplement en exposant l'état caché en tant que modèle et en le convertissant en paramètre de filtre.

Cependant, si vous devez écrire un filtre avec état, vous devez marquer le filtre comme $stateful, ce qui signifie qu'il sera exécuté une ou plusieurs fois au cours de chaque cycle $digest.

index,html

<div ng-controller="MyController">
 Input: <input ng-model="greeting" type="text"><br>
 Decoration: <input ng-model="decoration.symbol" type="text"><br>
 No filter: {{greeting}}<br>
 Decorated: {{greeting | decorate}}<br>
</div>
 

script.js :

angular.module('myStatefulFilterApp', [])
.filter('decorate', ['decoration', function(decoration) {

 function decorateFilter(input) {
  return decoration.symbol + input + decoration.symbol;
 }
 decorateFilter.$stateful = true;

 return decorateFilter;
}])
.controller('MyController', ['$scope', 'decoration', function($scope, decoration) {
 $scope.greeting = 'hello';
 $scope.decoration = decoration;
}])
.value('decoration', {symbol: '*'});

Le résultat est :

No filter: hello
Decorated: *hello*

La prochaine fois, j'écrirai un article sur l'utilisation courante du filtre dans Angularjs.