Penapis digunakan untuk mengubah suai data dan boleh disertakan dalam ungkapan atau menggunakan arahan paip. Di bawah ialah senarai penapis yang biasa digunakan.
Penapis huruf kecil
Tambah penapis huruf kecil, menggunakan ungkapan paip. Tambahkan penapis huruf kecil di sini untuk mencetak nama pelajar dalam huruf kecil.
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}}
Penapis Mata Wang
Penapis dolar Kanada menggunakan aksara paip untuk mengembalikan ungkapan nombor. Di sini kami telah menambah penapis Mata Wang untuk mencetak caj menggunakan format Mata Wang.
Enter fees: <input type="text" ng-model="student.fees"> fees: {{student.fees | currency}}
Penapis penapis
Untuk menunjukkan hanya subjek yang diperlukan, kami menggunakan subjectName sebagai penapis.
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>
Isih Penapis
Untuk memesan topik mengikut tag, kami menggunakan teg orderBy.
Subject: <ul> <li ng-repeat="subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
Contoh
Contoh berikut akan menunjukkan semua penapis di atas.
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>
Output
Buka textAngularJS.html dalam pelayar web dan lihat hasil berikut: