Filter werden verwendet, um die modifizierten Daten zu ändern und können in Ausdrücken oder mit Rohrformen anhand von Richtlinien der Pipe -Zeichen klassifiziert werden. Unten finden Sie eine Liste der häufig verwendeten Filter.
| S.no. | Name | beschreiben |
|---|---|---|
| 1 | Hauptstadt | Text in Großbuchstaben konvertieren. |
| 2 | Kleinbuchstaben | Text in Kleinbuchstaben konvertieren. |
| 3 | Währung | Währungsformattext. |
| 4 | Filter | Filtern Sie eine Reihe von Teilmengen, die auf den vorgesehenen Kriterien basieren. |
| 5 | Sortieren | Sortierung bietet Standard -Basisarrays. |
Kappenfilter
Fügen Sie Großbuchstaben hinzu, um Ausdrücke von Rohrzeichen zu verwenden. Hier werden Kapitalfilter hinzugefügt und die Namen der Schüler werden in Großbuchstaben gedruckt.
Geben Sie den Vornamen ein: <Eingabe type = "text" ng-model = "student.firstname"> Nachname eingeben: <Eingabe type = "text" ng-model = "student.lastName"> Name im oberen Fall: {{{student.fullname () | Großbuchstaben}}Kleinbuchstabenfilter
Fügen Sie Kleinbuchstabenfilter mit Ausdrücken von Rohrzeichen hinzu. Fügen Sie hier einen Kleinbuchstabenfilter hinzu, um Schülernamen in Kleinbuchstaben zu drucken.
Geben Sie den Vornamen ein: <Eingabe type = "text" ng-model = "student.firstname"> Nachname eingeben: <Eingabe type = "text" ng-model = "student.lastName"> Name im oberen Fall: {{{student.fullname () | Kleinbuchstaben}}Währungsfilter
Der kanadische Dollarfilter verwendet ein Rohrcharakter, um den Ausdruck der Zahl zurückzugeben. Hier haben wir der Druckgebühr der Währung mit dem Währungsformat Filter hinzugefügt.
Geben Sie Gebühren ein: <Eingabe type = "text" ng-model = "student.fees"> Gebühren: {{student.fees | Währung}}Filter für Filter
Um nur die gewünschten Themen anzuzeigen, verwenden wir den Fachnamen als Filter.
Geben Sie Betreff ein: <Eingabe type = "text" ng-model = "Subjektname"> Betreff: <ul> <li ng-repeat = "Subjekt in student.subjects | filter: subjektname"> {{Subjekt.name + ', Marks:' + Subjekt.Marks}} </li> </ul>> </ul>>Filter sortieren
Um Themen nach Tags zu sortieren, verwenden wir OrderBy -Tags.
Betreff: <ul> <li ng-repeat = "Subjekt in student.subjects | orderby: 'marks'"> {{Subjekt.Name + ', Marks:' + Subjekt.marks}} </li> </ul>Beispiel
Die folgenden Beispiele zeigen alle oben genannten Filter.
testangularJs.html
<html> <Head> <titels> Angular JS-Filter </title> </head> <body> <h2> Angularjs Beispielanwendung </H2> <div ng-App = "" ng-controller = "studentController"> <table> <tr> <Td> Vorname eingeben: </td> <tdde> <inputtyp = "text" ng-model = "student.firstname"> </td> </tr> <tr> <td> Geben Sie den Nachnamen ein: </td> <td> <input type = "text" ng-model = "studentname"> </td> </tr> <td> Fees: </td> <td> <Input-Typ = "text". ng-model = "student.fees"> </td> </tr> <tr> <td> Betreff eingeben: </td> <td> <input type = "text" ng-model = "Subjektname"> </td> </tr> </tr> </tr> <tr> <td> in oberen Fall: </td> <td> <td> {{{{{{{) {) Großbuchstaben}} </td> </tr> <tr> <td> Name im unteren Fall: </td> <td> {{student.fullname () | Kleinbuchstaben}} </td> </tr> <tr> <td> Gebühren: </td> <td> {{Student.Fees | Währung}} </td> </tr> <tr> <td> Betreff: </td> <td> <ul> <li ng-repeat = "Betreff in student.subjects | filter: subjektname orderby: 'marks'" </li></ul></td></tr></table></div><script>function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name: 'math', marks: 65}], fullname: function () {var studentObject; StudentObject = $ scope.student; return studentObject.firstname + "" + studentObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Ausgabe
Öffnen Sie TextangularJs.html in einem Webbrowser und sehen Sie die folgenden Ergebnisse:
Das obige ist die Informationen, die den AngularJS -Filter aussortieren. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!