Heim > Artikel > Web-Frontend > AngularJS-Grundwissenshinweise – Filter_AngularJS

AngularJS-Grundwissenshinweise – Filter_AngularJS

WBOYOriginal: 2016-05-16 15:59:501125Durchsuche

Filter werden zum Ändern von Daten verwendet und können in Ausdrücke oder mithilfe von Pipe-Anweisungen eingefügt werden. Nachfolgend finden Sie eine Liste häufig verwendeter Filter.

S.Nr. Name Beschreibung
1 Großbuchstaben Text in Großbuchstaben umwandeln.
2 Kleinbuchstaben Text in Kleinbuchstaben umwandeln.
3 Währung Text im Währungsformat.
4 Filter Filtert eine Teilmenge des Arrays basierend auf den bereitgestellten Kriterien.
5 Sortieren Sortieren stellt standardmäßige Basisarrays bereit. Caps-Filter

Fügen Sie einen Filterausdruck in Großbuchstaben mithilfe eines Pipe-Zeichens hinzu. Hier wurde ein Großbuchstabenfilter hinzugefügt, um Schülernamen in Großbuchstaben zu drucken.

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

Kleinbuchstabenfilter

Kleinbuchstabenfilter mit Pipe-Ausdruck hinzufügen. Fügen Sie hier einen Kleinbuchstabenfilter hinzu, um die Namen der Schüler in Kleinbuchstaben zu drucken.

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

Währungsfilter

Der kanadische Dollar-Filter verwendet das Pipe-Zeichen, um einen Zahlenausdruck zurückzugeben. Hier haben wir den Filter „Währung“ hinzugefügt, um die Gebühren im Währungsformat auszudrucken.

Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}

Filter der Filter

Um nur die erforderlichen Themen anzuzeigen, verwenden wir subjectName als Filter.

Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
 <li ng-repeat="subject in student.subjects | filter: subjectName">
  {{ subject.name + ', marks:' + subject.marks }}
 </li>
</ul>

Sortierfilter

Um Themen nach Tag zu ordnen, verwenden wir das Tag „orderBy“.

Betreff:

<ul>
 <li ng-repeat="subject in student.subjects | orderBy:'marks'">
  {{ subject.name + ', marks:' + subject.marks }}
 </li>
</ul>

Beispiel

Das folgende Beispiel demonstriert alle oben genannten Filter.

testAngularJS.html

<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
  <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
   {{ subject.name + ', marks:' + subject.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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript implementiert coole Drag-Paging_Javascript-FähigkeitenNächster Artikel：JavaScript implementiert coole Drag-Paging_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen