Apakah Penapis di AngularJS?
A Penapis di AngularJS membantu untuk memformat nilai satu ungkapan untuk paparan kepada pengguna tanpa mengubah format asal. Contohnya, jika anda mahu tali anda dalam huruf kecil atau huruf besar, anda boleh melakukannya menggunakan penapis. Terdapat penapis terpasang seperti 'huruf kecil', 'huruf besar', yang dapat mengambil output huruf kecil dan huruf besar dengan sewajarnya.
Begitu juga untuk nombor, anda boleh menggunakan penapis lain.
Semasa tutorial ini, kita akan melihat pelbagai penapis bawaan standard yang terdapat di Angular.
Dalam tutorial ini, anda akan belajar-
- Penapis huruf kecil di AngularJS
- Penapis Huruf Besar di AngularJS
- Penapis Nombor di AngularJS
- Penapis Mata Wang dalam AngularJS
- Penapis JSON dalam AngularJS
Penapis huruf kecil di AngularJS
Penapis ini mengambil output rentetan dan memformat rentetan dan menampilkan semua watak dalam rentetan sebagai huruf kecil.
Mari lihat contoh penapis AngularJS dengan pilihan tolowercase AngularJS.
Dalam contoh di bawah, kami akan menggunakan pengawal untuk mengirim rentetan ke pandangan melalui objek lingkup. Kami kemudian akan menggunakan penapis dalam pandangan untuk menukar rentetan menjadi huruf kecil.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Penjelasan Kod:
- Di sini kita melewati rentetan, yang merupakan gabungan dari huruf kecil dan huruf besar dalam variabel anggota yang disebut "tutorialName" dan melampirkannya ke objek lingkup. Nilai rentetan yang dilalui adalah "AngularJS".
- Kami menggunakan pemboleh ubah anggota "tutorialName" dan meletakkan simbol penapis (|) yang bermaksud bahawa output perlu diubah suai dengan menggunakan penapis. Kami kemudian menggunakan kata kunci huruf kecil untuk menggunakan penapis terbina dalam untuk mengeluarkan keseluruhan rentetan dengan huruf kecil.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari keluaran
- Dapat dilihat bahawa rentetan "AngularJS" yang dilewatkan dalam tutorialName pemboleh ubah yang merupakan gabungan karakter huruf kecil dan huruf besar telah dijalankan.
- Selepas pelaksanaan, output akhir adalah huruf kecil seperti yang ditunjukkan di atas.
Penapis Huruf Besar di AngularJS
Penapis ini serupa dengan penapis huruf kecil; perbezaannya ialah mengambil rentetan output dan memformat rentetan dan menampilkan semua watak dalam rentetan sebagai huruf besar.
Mari lihat contoh penapis huruf besar AngularJS dengan pilihan huruf kecil.
Dalam contoh huruf besar AngularJS di bawah, kami akan menggunakan pengawal untuk menghantar rentetan ke pandangan melalui objek lingkup. Kami kemudian akan menggunakan penapis dalam pandangan untuk menukar rentetan menjadi huruf besar.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Penjelasan Kod:
- Di sini kita melewati rentetan yang merupakan gabungan huruf kecil dan huruf besar "Angular JS" dalam variabel anggota yang disebut "tutorialName" dan melampirkannya ke objek lingkup.
- Kami menggunakan pemboleh ubah anggota "tutorialName" dan meletakkan simbol penapis (|), yang bermaksud bahawa output perlu diubah dengan menggunakan penapis. Kami kemudian menggunakan kata kunci huruf besar untuk menggunakan penapis terbina dalam untuk mengeluarkan keseluruhan rentetan huruf besar.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
- Dapat dilihat bahawa rentetan yang diteruskan dalam pemboleh ubah tutorialName yang merupakan gabungan antara huruf kecil dan huruf besar telah dikeluarkan di semua huruf besar.
Penapis Nombor di AngularJS
Penapis ini membentuk nombor dan dapat menerapkan had pada titik perpuluhan bagi suatu nombor.
Mari lihat contoh penapis AngularJS dengan pilihan nombor.
Dalam contoh di bawah,
Kami ingin menunjukkan bagaimana kami boleh menggunakan penapis nombor untuk memformat nombor untuk dipaparkan dengan sekatan 2 tempat perpuluhan.
Kami akan menggunakan pengawal untuk menghantar nombor ke pandangan melalui objek lingkup. Kami kemudian akan menggunakan penapis dalam paparan untuk menerapkan penapis nombor.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Penjelasan Kod:
- Di sini kita memberikan nombor dengan bilangan perpuluhan yang lebih besar dalam pemboleh ubah anggota yang disebut tutorialID dan melampirkannya ke objek lingkup.
- Kami menggunakan tutorialID pemboleh ubah anggota dan meletakkan simbol penapis (|) bersama dengan penapis nombor. Sekarang dalam bilangan: 2, keduanya menunjukkan bahawa penapis harus mengehadkan bilangan tempat perpuluhan menjadi 2.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
- Dapat dilihat bahawa bilangan yang dilewatkan dalam tutorialID pemboleh ubah yang memiliki sejumlah besar titik perpuluhan telah dibatasi hingga 2 tempat perpuluhan kerana bilangan: 2 saringan yang digunakan.
Penapis Mata Wang dalam AngularJS
Penapis ini membentuk penapis mata wang kepada nombor.
Andaikan, jika anda ingin memaparkan nombor dengan mata wang seperti $, maka penapis ini boleh digunakan.
Dalam contoh di bawah ini kita akan menggunakan pengawal untuk menghantar nombor ke pandangan melalui objek lingkup. Kami kemudian akan menggunakan penapis dalam pandangan untuk menerapkan penapis semasa.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Penjelasan Kod:
- Di sini kita memberikan nombor dalam pemboleh ubah anggota yang disebut tutorialprice dan melampirkannya ke objek lingkup.
- Kami menggunakan harga tutorial pemboleh ubah anggota dan meletakkan simbol penapis (|) bersama dengan penapis mata wang. Perhatikan bahawa mata wang yang diterapkan bergantung pada tetapan bahasa yang diterapkan pada mesin.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari keluaran
- Ini dapat dilihat simbol mata wang telah ditambahkan ke angka yang diteruskan dalam harga tutorial berubah.
- Dalam kes kami, kerana tetapan bahasa adalah bahasa Inggeris (Amerika Syarikat), simbol $ dimasukkan sebagai mata wang.
Penapis JSON dalam AngularJS
Penapis ini memformat input seperti JSON dan menggunakan penapis AngularJS JSON untuk memberikan output dalam JSON.
Dalam contoh di bawah ini kita akan menggunakan pengawal untuk menghantar objek jenis JSON ke pandangan melalui objek lingkup. Kami kemudian akan menggunakan penapis dalam pandangan untuk menerapkan penapis JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Penjelasan Kod:
- Di sini kita memberikan nombor dalam variabel anggota yang disebut "tutorial" dan melampirkannya ke objek lingkup. Pemboleh ubah anggota ini mengandungi rentetan jenis JSON dari Tutorial ID: 12, dan TutorialName: "Angular".
- Kami menggunakan tutorial pemboleh ubah anggota dan meletakkan simbol penapis (|) bersama dengan penapis JSON.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
- Dapat dilihat bahawa JSON seperti tali diuraikan dan menunjukkan objek JSON yang betul di penyemak imbas.
Ringkasan:
- Penapis digunakan untuk mengubah cara output ditampilkan kepada pengguna.
- Angular menyediakan penapis terbina dalam seperti penapis huruf kecil dan huruf besar untuk menukar output rentetan ke bahagian bawah dan huruf besar masing-masing.
- Ada juga ketentuan untuk mengubah cara angka ditampilkan dengan menggunakan penapis angka dengan menentukan jumlah titik perpuluhan yang akan ditampilkan dalam angka tersebut.
- Seseorang juga boleh menggunakan penapis mata wang untuk menambahkan simbol mata wang ke nombor apa pun.
- Sekiranya terdapat syarat untuk memiliki output khusus json, sudut juga menyediakan penapis JSON untuk menyaring tali JSON seperti format JSON.