AngularJS - Filter
Filter digunakan untuk mengubah data. Mereka bisa dipukul dalam ekspresi atau arahan menggunakan karakter pipa (|). Daftar berikut menunjukkan filter yang umum digunakan.
| Sr.No. | Nama & Deskripsi |
|---|---|
| 1 | uppercase mengonversi teks menjadi teks huruf besar. |
| 2 | lowercase mengonversi teks menjadi teks huruf kecil. |
| 3 | currency memformat teks dalam format mata uang. |
| 4 | filter memfilter larik menjadi bagiannya berdasarkan kriteria yang diberikan. |
| 5 | orderby memesan array berdasarkan kriteria yang diberikan. |
Filter Huruf Besar
Tambahkan filter huruf besar ke ekspresi menggunakan karakter pipa. Di sini kami telah menambahkan filter huruf besar untuk mencetak nama siswa dengan huruf kapital semua.
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}}Filter Huruf Kecil
Tambahkan filter huruf kecil ke ekspresi menggunakan karakter pipa. Di sini kami telah menambahkan filter huruf kecil untuk mencetak nama siswa dalam huruf kecil semua.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}Filter Mata Uang
Tambahkan filter mata uang ke nomor yang mengembalikan ekspresi menggunakan karakter pipa. Di sini kami telah menambahkan filter mata uang untuk mencetak biaya menggunakan format mata uang.
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}Saring
Untuk menampilkan hanya subjek yang diperlukan, kami menggunakan subjectName sebagai 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>Filter OrderBy
Untuk mengurutkan subjek berdasarkan tanda, kami menggunakan tanda orderBy.
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>Contoh
Contoh berikut menunjukkan penggunaan semua filter yang disebutkan di atas.
testAngularJS.htm
<html>
<head>
<title>Angular JS Filters</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" 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>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($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>
</body>
</html>Keluaran
Buka file testAngularJS.htm di browser web. Lihat hasilnya.