Detaillierte Erläuterung der Verwendung von Filtern in Angularjs_AngularJS

Die Funktion von Filter besteht darin, eine Eingabe zu empfangen, sie anhand einer bestimmten Regel zu verarbeiten und dann das verarbeitete Ergebnis an den Benutzer zurückzugeben. Filter können in Vorlagen, Controllern oder Diensten verwendet werden und es ist auch einfach, einen Filter anzupassen.

Filter in der Vorlage verwenden

Filter können in Ansichtsvorlagen mit dem folgenden Syntaxausdruck verwendet werden:

{{ Ausdrucksfilter }}

Zum Beispiel: Das Format {{ 12 | Währung }} verwendet den Währungsfilter, um die Zahl 12 in die Währungsform zu filtern, und das Ergebnis ist 12,00 $.

Der Filter kann auf die Ergebnisse eines anderen Filters angewendet werden. Dies wird als „Verkettung“ bezeichnet und mit der folgenden Syntax verwendet:

{{ Ausdruck |. filter2 ... }}

Parameter können im Filter erforderlich sein. Die Syntax lautet:

{{ Ausdruck |. filter:argument1:argument2:... }}

Zum Beispiel: Das Format {{ 1234 |. Zahl:2 }} verwendet die Filterverwendung von Zahl, um die Zahl 1234 in eine Zahl mit zwei Dezimalstellen zu filtern. Das Ergebnis ist: 1.234,00.

Filter verwenden
in Controllern, Diensten und Anweisungen

Sie können Filter in Controllern, Diensten und Anweisungen verwenden.

Dazu müssen Sie den Abhängigkeitsnamen in Ihren Controller/Dienst/Ihre Direktive einfügen: Filter; Beispiel: Wenn ein Filter „Number“ ist, müssen Sie „NumberFilter“ mithilfe der Abhängigkeit einfügen. Der injizierte Parameter ist eine Funktion, die einen Wert als ersten Parameter annimmt und dann den zweiten Parameter zum Filtern der Parameter verwendet.

Das folgende Beispiel verwendet einen Filter namens filter. Dieser Filter kann Arrays basierend auf Unterarrays reduzieren. Sie können auch Markup in der Ansichtsvorlage anwenden, wie zum Beispiel: {{ctrl.array|filter:'a'}}, das eine Volltextsuche nach „a“ durchführt. Durch die Verwendung von Filtern in der Ansichtsvorlage wird jedoch jeder Filter neu gefiltert, und wenn das Array relativ groß ist, wird es mehrmals geladen.

Das folgende Beispiel ruft also direkt den Filter im Controller auf. Dadurch kann der Controller den Filter bei Bedarf aufrufen (z. B. wenn die Backend-Daten geladen werden oder sich der Filterausdruck ändert).

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');
}]);

Das Ergebnis ist:

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

Benutzerdefinierte Filter erstellen:

Das Schreiben Ihres eigenen Filters ist sehr einfach: Registrieren Sie einfach eine neue Filter-Factory-Funktion in Ihrem Modul. Intern wird hier filterProvider verwendet. Diese Factory-Funktion sollte eine neue Filterfunktion mit dem Eingabewert als erstem Argument zurückgeben. Eventuelle Filterparameter werden als zusätzliche Parameter an die Filterfunktion übergeben.

Diese Filterfunktion sollte eine einfache Funktion sein. Dies bedeutet, dass es zustandslos und idempotent sein sollte. Wenn sich die Eingabefunktion ändert, verlässt sich Angular auf diese Eigenschaften und führt den Filter aus.

Hinweis: Der Name des Filters muss ein gültiger Winkelausdrucksbezeichner sein. Zum Beispiel Großbuchstaben oder orderBy. Sonderzeichen sind im Namen nicht erlaubt, zum Beispiel sind Bindestriche und Punkte nicht erlaubt. Wenn Ihr Filter einen Namensraum haben soll, können Sie Großbuchstaben (myappSubsectionFilterx) oder Unterstriche (myapp_subsection_filterx) verwenden.

Der folgende Beispielfilter kehrt eine Zeichenfolge um. Darüber hinaus kann eine Bedingung hinzugefügt werden, um die Zeichenfolge in Großbuchstaben umzuwandeln.

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);
}]);

Das Ergebnis ist:

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

Zustandsbehaftete Filter

Es wird dringend empfohlen, Stateful-Filter zu schreiben, da diese nicht mit Angular optimiert werden können, was häufig zu Leistungsproblemen führt. Viele zustandsbehaftete Filter werden in zustandslose Filter umgewandelt, indem einfach der verborgene Zustand als Modell verfügbar gemacht und in einen Filterparameter umgewandelt wird.

Wenn Sie jedoch einen zustandsbehafteten Filter schreiben müssen, müssen Sie den Filter als $stateful markieren, was bedeutet, dass er während jedes $digest-Zyklus einmal oder mehrmals ausgeführt wird.

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: '*'});

Das Ergebnis ist:

No filter: hello
Decorated: *hello*

Das nächste Mal werde ich einen Artikel über die allgemeine Verwendung von Filtern in AngularJS schreiben.