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.