Apa itu Filter di AngularJS?
Sebuah Filter di AngularJS membantu untuk memformat nilai ekspresi untuk menampilkan kepada pengguna tanpa merubah format aslinya. Misalnya, jika Anda ingin string Anda dalam huruf kecil atau besar, Anda dapat melakukannya menggunakan filter. Ada filter bawaan seperti 'huruf kecil', 'huruf besar', yang dapat mengambil keluaran huruf kecil dan huruf besar yang sesuai.
Demikian pula untuk angka, Anda dapat menggunakan filter lain.
Selama tutorial ini, kita akan melihat berbagai filter bawaan standar yang tersedia di Angular.
Dalam tutorial ini, Anda akan belajar-
- Filter huruf kecil di AngularJS
- Filter Huruf Besar di AngularJS
- Filter Angka di AngularJS
- Filter Mata Uang di AngularJS
- Filter JSON di AngularJS
Filter huruf kecil di AngularJS
Filter ini mengambil output string dan memformat string dan menampilkan semua karakter dalam string sebagai huruf kecil.
Mari kita lihat contoh filter AngularJS dengan opsi tolowercase AngularJS.
Dalam contoh di bawah ini, kita akan menggunakan pengontrol untuk mengirim string ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk mengubah string menjadi huruf kecil.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Penjelasan Kode:
- Di sini kita mengirimkan string, yang merupakan kombinasi karakter huruf kecil dan huruf besar dalam variabel anggota yang disebut "tutorialName" dan melampirkannya ke objek cakupan. Nilai string yang diteruskan adalah "AngularJS".
- Kami menggunakan variabel anggota "tutorialName" dan meletakkan simbol filter (|) yang berarti bahwa output perlu dimodifikasi dengan menggunakan filter. Kami kemudian menggunakan kata kunci huruf kecil untuk mengatakan menggunakan filter bawaan untuk mengeluarkan seluruh string dalam huruf kecil.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluaran
- Terlihat bahwa string "AngularJS" yang diteruskan dalam variabel tutorialName yang merupakan kombinasi karakter huruf kecil dan huruf besar telah dieksekusi.
- Setelah dieksekusi, hasil akhir berupa huruf kecil seperti gambar di atas.
Filter Huruf Besar di AngularJS
Filter ini mirip dengan filter huruf kecil; perbedaannya adalah yang mengambil output string dan memformat string dan menampilkan semua karakter dalam string sebagai huruf besar.
Mari kita lihat contoh filter kapitalisasi AngularJS dengan opsi huruf kecil.
Dalam contoh AngularJS di bawah ini, kita akan menggunakan pengontrol untuk mengirim string ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk mengubah string menjadi huruf besar.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Penjelasan Kode:
- Di sini kita melewatkan string yang merupakan kombinasi karakter huruf kecil dan huruf besar "JS Angular" dalam variabel anggota yang disebut "tutorialName" dan melampirkannya ke objek cakupan.
- Kami menggunakan variabel anggota "tutorialName" dan meletakkan simbol filter (|), yang berarti bahwa output perlu dimodifikasi dengan menggunakan filter. Kami kemudian menggunakan kata kunci huruf besar untuk mengatakan menggunakan filter bawaan untuk mengeluarkan seluruh string dalam huruf besar.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Terlihat bahwa string yang diteruskan pada variabel tutorialName yang merupakan kombinasi karakter huruf kecil dan huruf besar telah dikeluarkan dalam huruf besar semua.
Filter Angka di AngularJS
Filter ini memformat angka dan dapat menerapkan batas ke titik desimal untuk sebuah angka.
Mari kita lihat contoh filter AngularJS dengan opsi angka.
Pada contoh di bawah ini,
Kami ingin menunjukkan bagaimana kami dapat menggunakan filter angka untuk memformat angka untuk ditampilkan dengan batasan 2 tempat desimal.
Kami akan menggunakan pengontrol untuk mengirim nomor ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk menerapkan filter angka.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Penjelasan Kode:
- Di sini kita meneruskan angka dengan jumlah tempat desimal yang lebih besar dalam variabel anggota yang disebut tutorialID dan melampirkannya ke objek lingkup.
- Kami menggunakan variabel anggota tutorialID dan meletakkan simbol filter (|) bersama dengan filter nomor. Sekarang di nomor: 2, keduanya menunjukkan bahwa filter harus membatasi jumlah tempat desimal menjadi 2.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Terlihat bahwa bilangan yang diteruskan dalam variabel tutorialID yang memiliki banyak titik desimal telah dibatasi hingga 2 tempat desimal karena banyaknya: 2 filter yang diterapkan.
Filter Mata Uang di AngularJS
Filter ini memformat filter mata uang menjadi angka.
Misalkan, jika Anda ingin menampilkan angka dengan mata uang seperti $, maka filter ini dapat digunakan.
Dalam contoh di bawah ini kita akan menggunakan pengontrol untuk mengirim nomor ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk menerapkan filter saat ini.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Penjelasan Kode:
- Di sini kita meneruskan angka dalam variabel anggota yang disebut tutorialprice dan melampirkannya ke objek lingkup.
- Kami menggunakan tutorialprice variabel anggota dan meletakkan simbol filter (|) bersama dengan filter mata uang. Perhatikan bahwa mata uang yang diterapkan bergantung pada pengaturan bahasa yang diterapkan ke mesin.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluaran
- Dapat dilihat simbol mata uang telah ditambahkan ke nomor yang diteruskan dalam variabel tutorialprice.
- Dalam kasus kami, karena pengaturan bahasa adalah Inggris (Amerika Serikat), simbol $ dimasukkan sebagai mata uang.
Filter JSON di AngularJS
Filter ini memformat input seperti JSON dan menerapkan filter AngularJS JSON untuk memberikan output dalam JSON.
Dalam contoh di bawah ini kita akan menggunakan pengontrol untuk mengirim objek tipe JSON ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk menerapkan filter JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Penjelasan Kode:
- Di sini kita meneruskan angka dalam variabel anggota yang disebut "tutorial" dan melampirkannya ke objek lingkup. Variabel anggota ini berisi string jenis JSON dari Tutorial ID: 12, dan TutorialName: "Angular".
- Kami menggunakan tutorial variabel anggota dan meletakkan simbol filter (|) bersama dengan filter JSON.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Dapat dilihat bahwa JSON seperti string diurai dan menampilkan objek JSON yang tepat di browser.
Ringkasan:
- Filter digunakan untuk mengubah cara keluaran ditampilkan kepada pengguna.
- Angular menyediakan filter bawaan seperti filter huruf kecil dan huruf besar untuk mengubah keluaran string masing-masing menjadi huruf kecil dan huruf besar.
- Ada juga ketentuan untuk mengubah cara angka ditampilkan dengan menggunakan filter angka dengan menentukan jumlah titik desimal yang akan ditampilkan dalam angka.
- Anda juga dapat menggunakan filter mata uang untuk menambahkan simbol mata uang ke nomor apa pun.
- Jika ada persyaratan untuk memiliki keluaran spesifik json, angular juga menyediakan filter JSON untuk memfilter JSON seperti string ke dalam format JSON.