Filter (Filter) in AngularJS
Mục lục
Das Konzept und die Rolle von Filtern in AngularJS
Wenn wir uns mit reinem Javascript nähern, sehen wir, dass es bei der Arbeit mit Daten einige Situationen gibt, in denen wir einen ziemlich komplizierten persistenten Datentyp konvertieren müssen, um ein echtes Beispiel zu nehmen, wenn wir eine Variable haben, die den Betrag mit dem Datentyp number ( float) , wenn wir im Währungsformat auf dem Bildschirm drucken möchten, müssen wir die folgenden Schritte nacheinander ausführen:
- Datentyp in String umwandeln,
- Verketten Sie Zeichenfolgen, indem Sie nach der Zeichenfolge ein $-Zeichen hinzufügen
- Drucken Sie die Zeichenfolge innerhalb des HTML-Inhalts (über die innerText-Eigenschaft)
- Wiederholen Sie die obigen Schritte nacheinander, wenn die Daten aktualisiert werden
Mit angleJs haben wir einen Filtermechanismus, um das Modell zu unterstützen, um diese Aufgaben zu verkürzen, das Modell muss den Datentyp nicht konvertieren, Filter erledigen die Arbeit des Filterns der Daten und des Druckens der Ergebnisse, wie wir wollen. . Kurz gesagt: Filter formatieren Daten neu, wenn sie dem Endbenutzer präsentiert werden
Syntax zur Verwendung von Filtern in angleJS:
{{expression | filter}}Der Filter wird über das Zeichen „|“ in den Ausdruck eingefügt. , gefolgt von filtern
Filter können als aufeinanderfolgende Links verbunden werden, zum Beispiel:
{{expression | filter | filter}}In diesem Fall wird der erste Filter verwendet, um den Ausdruck zu filtern, der zweite Filter filtert weiterhin den Wert des ersten Filters.
Hinweis: Der Filter ändert nicht den tatsächlichen Wert der Variablen, er ändert nur das Anzeigeformat des Endbenutzers.
Liste der eingebauten Filter in angleJS
Einige der beliebten eingebauten Filter in AngularJS:
- Währung
- Datum
- Kleinbuchstaben
- Großbuchstaben
- Suche
- …
Währungsfilter
Wird verwendet, um die Währung für den Ausdruck zu formatieren, der dem Benutzer im Währungsformat angezeigt wird
Dokumente: https://docs.angularjs.org/api/ng/filter/currency
Standardmäßig wird das Format USD Dollars mit 2 Zahlen nach dem . Das folgende Beispiel beschreibt einige Möglichkeiten, Filter zu verwenden. Auf der HTML-Vorlagenebene und der Skriptebene können wir einen Filter unter der HTML-Ebene oder einen Filter auf der Javascript-Ebene verwenden, aber die Methode der HTML-Ebene wird häufiger verwendet:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | currency:'$ '}} <br/> {{price | currency: '$ ' : 0}} <br/> {{price2 | currency:'VND '}} <br/> <input type="number" ng-model="price3" /> <br/> {{changeprice()}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope,$filter) => { $scope.price = 1000; $scope.price2 = 2000; $scope.price3 = 4000; $scope.changeprice = function(){ bind_model = $filter('currency')($scope.price3, '$ ', 5); return bind_model; } }); </script> </html>Ergebnis beim Drucken in den Browser:
Aus meiner Sicht trifft dieser Filter jedoch nicht auf VND zu, da die Währung meines Landes angezeigt wird, aber VND rechts neben der Zahl steht, sodass dieser Filter nicht anspricht. Natürlich gibt es eine Lösung, wir können unseren eigenen benutzerdefinierten Filter definieren
Datumsfilter
Dokumente: https://docs.angularjs.org/api/ng/filter/date
Mit dem Datumsfilter können wir alle Datumsdaten gemäß der gewünschten Absicht darstellen, wenn wir die Daten auf der Schnittstelle anzeigen.
Betrachten Sie das folgende Beispiel, um den Datumsfilter besser zu verstehen:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Date filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{date | date:'dd/MM/yyyy'}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope) => { $scope.date = Date.now(); console.log($scope.date); }); </script> </html>Ergebnis beim Drucken in den Browser:
Wir sehen, die Javascript-Layer-Daten sind Zeitstempel, die die aktuelle Zeit darstellen, während wir Code gemäß UNIX-Zeitstempel schreiben, aber beim Drucken der Schnittstelle haben wir dank des Filtermechanismus von angleJS den Datumswert gedruckt.
Nicht nur das, Filterdatum hat viele Optionen, die Ihnen helfen, verschiedene Formate auszuführen, lesen Sie die Dokumentation, um mehr zu verstehen.
Klein- und Großbuchstaben
Dieser Filter wird verwendet, um Daten zu filtern und sie in Klein- oder Großbuchstaben umzuformatieren
{{expression | lowercase}} {{expression | uppercase}}Suchfilter
Filter werden verwendet, um Daten in einer Liste zu finden, was sehr praktisch ist, siehe das Beispiel unten, um das Problem besser zu verstehen:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <input type="text" ng-model="search" placeholder="Search"> <table> <tr ng-repeat="x in listUser | filter:search"> <td> {{x.name}} </td> <td> {{x.age}} </td> </tr> </table> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', ($scope) => { $scope.listUser = [ { name: "toan", age: 20 }, { name: "huy", age: 21 }, { name: "hieu", age: 22 }, { name: "toan", age: 34 }, ]; }); </script> </html>Schnittstelle beim Drucken an den Browser
Benutzerdefinierte Filter (selbstdefinierte Filter)
Wenn die eingebauten Filter nicht ausreichen, können wir eine benutzerdefinierte Direktive definieren, um nach Belieben zu filtern. Syntax zum Initialisieren des benutzerdefinierten Filters:
app.filter('filtername',function(){});Im folgenden Beispiel erstelle ich einen Filter mit dem Filter, der für das Währungsformat VND verwendet wird
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | vndFilter}} </div> </body> <script> var app = angular.module('myApp', []); app.filter('vndFilter', function () { return function (x) { x = x.toString().replace(/B(?=(d{3})+(?!d))/g, ','); // convert float to string decimal thousand separator x += ' VND'; // concat with VND return x; }; }) app.controller('myController', function ($scope) { $scope.price = 5000000; }); </script> </html>Ergebnisse bei Anzeige im Browser
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
