Share

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 :

Filter currency

Filter ini digunakan untuk menampilkan format currency, contoh penggunaannya :

Filter number

Filter ini digunakan untuk memberikan nilai numeric pada text, penggunaannya seperti di bawah ini :

Sedangkan untuk memberikan nilai desimal, seperti ini :

Filter uppercase

Digunakan untuk merubah text menjadi huruf kapital semua.

Filter lowercase

Digunakan untuk merubah text menjadi huruf kecil semua

Filter filter

Digunakan untuk melakukan proses penyaringan data, contohnya seperti di bawah ini :

Filter orderby

Filter ini digunakan untuk mengurutkan data :

Di bawah ini adalah contoh halaman demo dengan menggunakan filter-filter di atas pada AngularJS

Sekian dulu, untuk tutorial mengenai AngularJS selanjutnya akan saya tulis pada artikel mendatang.

 

Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS