Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von Filtern in AngularJS_AngularJS

Detaillierte Erläuterung der Verwendung von Filtern in AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:54:381118Durchsuche

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.

2015616121340418.jpg (540×292)

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“.

Subject:
<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>

Ausgabe

Öffnen Sie textAngularJS.html in einem Webbrowser und sehen Sie die folgenden Ergebnisse:

2015616121404523.png (688×433)

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：So implementieren Sie Video-Screenshots in js HTML5_Javascript-KenntnisseNächster Artikel：So implementieren Sie Video-Screenshots in js HTML5_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen