Filter pada AngularJS

AngularJS mengenal yang namanya filter, digunakan untuk memformat data yang ditampilkan pada user. Pada tulisan ini saya akan memperkenalkan sebagian filter built in pada AngularJS selain itu juga akan menunjukkan bagaimana cara membuat custom filter dan menggunakannya.

AngularJS

Penggunaan filter pada AngularJS sangatlah mudah, tinggal tambahkan karakter pipe diikuti filter yang diinginkan pada expression.

Pada tulisan yang lalu AngularJS Mengambil Data dari Controller, kita sudah berhasil menampilkan data yang ada di controller pada view. Kali ini akan kita modif sedikit dengan menggunakan filter. Bagian yang akan kita ubah adalah judul menjadi uppercase dan penulis menjadi lowercase. Perhatikan potongan kode di bawah ini

sebelum difilter
view

setelah difilter
filtered

Sebegitu mudahnya menggunakan filter pada AngularJS 😀
Lalu apa aja filter built in yang tersedia pada AngularJS? silahkan merujuk ke dokumentasinya.

Lanjut ke materi selanjutnya. Suatu saat sangat mungkin kita memerlukan sebuah filter yang tidak tersedia secara built in, artinya kita perlu membuatnya sendiri. AngularJS memampukan kita untuk melakukannya.

Saya ambil contoh gampang, saya akan membuat sebuah filter yang digunakan untuk membalik sebuah kata. Nanti kita pasang pada kode produk. Pada file aplikasi.js tambahkan kode berikut pada bagian atas

Pada kode di atas pada baris pertama kita membuat sebuah modul dengan nama myApp, penamaan ini penting karena nanti digunakan pada directive ng-module di mana selama ini selalu kita kosongkan. Perhatikan pada baris 3 ke bawah, di sanalah pendeklarasian filter kita.

Ubah sedikit html untuk menerapkan filter yang baru saja dibuat

Jangan lupa kasih nilai pada ng-app dan pasang filter kita. Berikut hasilnya
custom filter

Bagaimana, menarik kan ngoprek AngularJS? hehehe…
Sampai juga pada tulisan saya selanjutnya

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

3 thoughts on “Filter pada AngularJS

    1. semua bahasa web dan semua web framework bisa dipakai dengan AngularJs.
      Maksudnya Blade terinspirasi? sepertinya enggak karena templating di MVC itu umum di Rails (Erb) dan ASP.NET MVC (Razor) jadi Blade lihat dari situ

Leave a Reply

Your email address will not be published. Required fields are marked *