Filter digunakan untuk mengubah data yang dimodifikasi dan dapat diklasifikasikan dalam ekspresi atau menggunakan arahan karakter pipa. Di bawah ini adalah daftar filter yang umum digunakan.
| S.No. | nama | menggambarkan |
|---|---|---|
| 1 | modal | Konversi teks menjadi teks huruf besar. |
| 2 | huruf kecil | Konversi teks ke teks kecil. |
| 3 | mata uang | Teks format mata uang. |
| 4 | Menyaring | Saring array himpunan bagian itu didasarkan pada kriteria yang disediakan. |
| 5 | Menyortir | Sorts menyediakan array dasar standar. |
Filter topi
Tambahkan filter huruf besar untuk menggunakan ekspresi karakter pipa. Di sini, filter modal ditambahkan, dan nama siswa dicetak dalam huruf kapital.
Masukkan nama depan: <input type = "text" ng-model = "student.firstname"> Masukkan nama belakang: <input type = "text" ng-model = "student.lastname"> Nama dalam huruf besar: {{student.fullname () | huruf besar}}Filter huruf kecil
Tambahkan filter huruf kecil, gunakan ekspresi karakter pipa. Tambahkan filter huruf kecil di sini untuk mencetak nama siswa dalam huruf kecil.
Masukkan nama depan: <input type = "text" ng-model = "student.firstname"> Masukkan nama belakang: <input type = "text" ng-model = "student.lastname"> Nama dalam huruf besar: {{student.fullname () | huruf kecil}}Filter mata uang
Filter dolar Kanada menggunakan karakter pipa untuk mengembalikan ekspresi angka. Di sini kami telah menambahkan filter ke biaya pencetakan mata uang menggunakan format mata uang.
Masukkan biaya: <input type = "text" ng-model = "student.fees"> biaya: {{student.fees | mata uang}}Filter untuk filter
Untuk hanya menampilkan topik yang diinginkan, kami menggunakan SubjectName sebagai filter.
Masukkan subjek: <input type = "text" ng-model = "subjekName"> Subjek: <ul> <li ng-repeat = "Subjek di Student.
Urutkan filter
Untuk mengurutkan topik berdasarkan tag, kami menggunakan tag OrderBy.
Subjek: <ul> <li ng-repeat = "Subjek di Student.subjects | orderby: 'Marks'"> {{Subject.Name + ', Marks:' + Subject.marks}} </li> </ul>contoh
Contoh -contoh berikut akan menunjukkan semua filter yang disebutkan di atas.
testangularjs.html
<html> <head> <title> filter JS Angular </itement> </head> <hody> <h2> Aplikasi sampel AngularJS </h2> <v Ng-App = "" NG-Controller = "StudentController"> <nable> <Tr> <td> Masukkan nama depan: </td> <table> <input> <t " NG-Model = "Student.FirstName"> </td> </tr> <tr> <td> Masukkan nama belakang: </td> <td> <input type = "text" ng-model = "student.lastname"> </td> </tr> <td> Masukkan fan NG-Model = "Student.fees"> </td> </tr> <tr> <td> Masukkan subjek: </td> <td> <input type = "text" ng-model = "SubjectName"> </td> </tr> </tr> </tr> <tr> <td> nama dalam kasus atas: </ttr> </tr> </tr> <tr> <td> <td> name di Upper Case: </td> </tr> </tr> <TD> <td> nama dalam kasus atas: </td> </tr> </tr> <tr> <td> nama dalam kasus atas: </td> </tr> </tr> <td> nama dalam kasus atas: </td> </tr> </tr> <td> nama dalam kasus atas: </td> </tr> </tr> <td> name di Upper Case: </td> </td. Uppercase}} </td> </tr> <tr> <td> Nama dalam huruf kecil: </td> <td> {{student.fullname () | huruf kecil}} </td> </tr> <tr> <td> Biaya: </td> <td> {{student.fees | Mata uang}} </td> </tr> <tr> <td> Subjek: </td> <td> <ul> <li ng-repeat = "Subjek di Student.Subjects | Filter: SubjectName | orderby: 'Marks'"> {{{{{{{{{{Subject.name + ', tanda:' + Subjek}}} {{{{Name + ' </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> <skrip src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Keluaran
Buka TextAngularJs.html di browser web dan lihat hasil berikut:
Di atas adalah informasi yang memilah filter AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!