Di dalam membangun sebuah aplikasi, kita pasti akan dihadapkan pada bagaimana cara untuk memanipulasi data. Dengan tujuan untuk memudahkan user dalam membaca dan menggunakan data. AngularJS memiliki filter untuk membantu Anda melakukannya, filter sangat baik untuk memanipulasi teks dalam tampilan HTML Anda. Filter bisa digunakan di dalam controller menggunakan tanda pipeline atau karakter | . Filter dalam AngularJS adalah case sensitive, jadi Anda mesti berhati-hati di dalam menggunakannya. Di bawah ini adalah beberapa filter yang umum digunakan.
| Filter | Deskripsi |
| date | menggunakan tipe data date |
| currency | mengubah text menjadi format currency |
| number | memberikan text nilai numeric |
| uppercase | mengubah text menjadi huruf kapital |
| lowercase | mengubah text menjadi huruf kecil |
| filter | menyaring data dari array sesuai dengan kriteria yang diinginkan |
| orderby | mengurutkan data sesuai dengan kriteria yang dipilih |
Filter Date
Berikut ini adalah contoh menggunakan filter date, sekaligus contoh format date yang didukung :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title>Contoh Menggunakan Filter Date</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> </head> <body> <h1>Contoh Menggunakan Filter Date</h1> <div ng-app="dateApp" ng-controller="dateController"> <p> Pilih Format Date <select ng-model="datevalue"> <option value="dd/MM/yyyy">dd/MM/yyyy</option> <option value="fullDate">Full Date</option> <option value="longDate">Long Date</option> <option value="shortDate">Short Date</option> <option value="medium">Medium</option> <option value="short">Short</option> <option value="mediumTime">Medium Time</option> <option value="shortTime">Short Time</option> </select> </p> <p> {{ result }} </p> </div> <script type="text/javascript"> var dtApp = angular.module('dateApp', []); dtApp.controller('dateController', function ($scope, $filter) { $scope.$watch('datevalue', function (val) { $scope.result = $filter('date')(new Date(), val); }, true); } ); </script> </body> </html> |
Filter currency
Filter ini digunakan untuk menampilkan format currency, contoh penggunaannya :
|
1 |
<p>{{ harga | currency }}<p> |
Filter number
Filter ini digunakan untuk memberikan nilai numeric pada text, penggunaannya seperti di bawah ini :
|
1 |
<p>{{ angka | number }}</p> |
Sedangkan untuk memberikan nilai desimal, seperti ini :
|
1 |
<p>{{ angka | number:2}}</p> |
Filter uppercase
Digunakan untuk merubah text menjadi huruf kapital semua.
|
1 |
<p>{{ nama | uppercase }}</p> |
Filter lowercase
Digunakan untuk merubah text menjadi huruf kecil semua
|
1 |
<p>{{ nama | lowercase }}</p> |
Filter filter
Digunakan untuk melakukan proses penyaringan data, contohnya seperti di bawah ini :
|
1 2 3 4 5 |
<ul> <li ng-repeat="subject in anggota.asal | filter: daerahAsal"> {{ subject.name + ', jarak:' + subject.jarak }} </li> </ul> |
Filter orderby
Filter ini digunakan untuk mengurutkan data :
|
1 2 3 4 5 |
<ul> <li ng-repeat="subject in anggota.asal | filter: daerahAsal |orderBy:'jarakS'"> {{ subject.name + ', jarak:' + subject.jarak }} </li> </ul> |
Di bawah ini adalah contoh halaman demo dengan menggunakan filter-filter di atas pada AngularJS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html> <head> <title>Filter Pada AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> </head> <body> <h2>Contoh Penggunaan Filter</h2> <div ng-app="mainApp" ng-controller="anggotaController"> <table> <tr> <td>Nama:</td> <td><input type="text" ng-model="anggota.nama"></td> </tr> <tr> <td>Tinggi: </td> <td><input type="text" ng-model="anggota.tinggi"></td> </tr> <tr> <td>Upah: </td> <td><input type="text" ng-model="anggota.upah"></td> </tr> <tr> <td>Asal: </td> <td><input type="text" ng-model="daerahAsal"></td> </tr> </table> <br /> Berikut hasilnya : <br /> <table> <tr> <td>Upper Case: </td><td>{{anggota.nama | uppercase}}</td> </tr> <tr> <td>Lower Case: </td><td>{{anggota.nama | lowercase}}</td> </tr> <tr> <td>Upah: </td><td>{{anggota.upah | currency}} </td> </tr> <tr> <td>Tinggi: </td><td>{{anggota.tinggi | number:2}} cm </td> </tr> <tr> <td>Daerah asal:</td> <td> <ul> <li ng-repeat="subject in anggota.asal | filter: daerahAsal |orderBy:'jarakS'"> {{ subject.name + ', jarak:' + subject.jarak }} </li> </ul> </td> </tr> </table> </div> <script type="text/javascript"> var mainApp=angular.module("mainApp", []); mainApp.controller('anggotaController', function($scope) { $scope.anggota={ nama: "Mangku giweng", upah:2500, tinggi:150, asal:[ {name:'Gianyar',jarak:25}, {name:'Denpasar',jarak:0}, {name:'Badung',jarak:3}, {name:'Tabanan',jarak:15} ], }; }); </script> </body> </html> |
Sekian dulu, untuk tutorial mengenai AngularJS selanjutnya akan saya tulis pada artikel mendatang.
Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS
