Filter Kustom AngularJS dengan Contoh

Anonim

Terkadang filter bawaan di Angular tidak dapat memenuhi kebutuhan atau persyaratan untuk memfilter keluaran. Dalam kasus seperti itu, filter khusus dapat dibuat yang dapat meneruskan keluaran dengan cara yang diperlukan.

Cara Membuat Filter Kustom

Dalam contoh di bawah ini kita akan meneruskan string ke tampilan dari controller melalui objek scope, tapi kita tidak ingin string ditampilkan seperti apa adanya.

Kami ingin memastikan bahwa setiap kali kami menampilkan string, kami meneruskan filter khusus yang akan menambahkan string lain dan menampilkan string lengkap kepada pengguna.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Penjelasan Kode:

  1. Di sini kita mengirimkan string "Angular" dalam variabel anggota yang disebut tutorial dan melampirkannya ke objek lingkup.
  2. Angular menyediakan layanan filter yang dapat digunakan untuk membuat filter kustom kami. 'Demofilter' adalah nama yang diberikan ke filter kami.
  3. Ini adalah cara standar di mana filter kustom ditentukan di mana fungsi dikembalikan. Fungsi inilah yang berisi kode kustom untuk membuat filter kustom. Dalam fungsi kami, kami mengambil string "Angular" yang diteruskan dari tampilan kami ke filter dan menambahkan string "Tutorial" ke ini.
  4. Kami menggunakan Demofilter kami pada variabel anggota kami yang diteruskan dari pengontrol ke tampilan.

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Dari keluarannya,

  • Terlihat bahwa filter kustom kami telah diterapkan dan
  • Kata 'Tutorial' telah ditambahkan di akhir string, yang diteruskan dalam tutorial variabel anggota.

Ringkasan:

Jika ada persyaratan yang tidak dipenuhi oleh salah satu filter yang ditentukan dalam sudut, Anda dapat membuat filter khusus dan menambahkan kode khusus untuk menentukan jenis keluaran yang Anda inginkan dari filter.