AngularJS Events: ng-click, ng-show, ng-hide (Contoh)

Daftar Isi:

Anonim

Saat membuat aplikasi berbasis web, cepat atau lambat aplikasi Anda harus menangani peristiwa DOM seperti klik mouse, gerakan, penekanan keyboard, perubahan peristiwa, dll.

AngularJS dapat menambahkan fungsionalitas yang dapat digunakan untuk menangani acara semacam itu.

Misalnya, jika ada tombol di halaman dan Anda ingin memproses sesuatu saat tombol diklik, kita dapat menggunakan arahan ng-click event.

Kami akan melihat arahan Acara secara rinci selama kursus ini.

Dalam tutorial ini, Anda akan belajar-

  • Apa itu direktif ng-click?
  • Apa itu direktif ng-show?
  • Apa itu direktif ng-hide?

Apa itu direktif ng-click?

" Perintah ng-click" digunakan untuk menerapkan perilaku kustom saat elemen di HTML diklik. Ini biasanya digunakan untuk tombol karena itu adalah tempat paling umum untuk menambahkan peristiwa yang merespons klik yang dilakukan oleh pengguna

Mari kita lihat contoh sederhana bagaimana kita dapat mengimplementasikan event click.

Dalam contoh ini, kita akan memiliki variabel counter yang nilainya akan bertambah ketika pengguna mengklik tombol.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Penjelasan Kode:

  1. Kami pertama kali menggunakan direktif ng-init untuk menyetel nilai hitungan variabel lokal ke 0.
  2. Kami kemudian memperkenalkan arahan acara ng-click ke tombol. Dalam arahan ini, kami menulis kode untuk menaikkan nilai variabel count dengan 1.
  3. Di sini kami menampilkan nilai variabel count kepada pengguna.

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

Keluaran:

Dari keluaran di atas,

  • Kita dapat melihat bahwa tombol "Increment" ditampilkan dan nilai variabel count awalnya nol.
  • Ketika Anda mengklik tombol Increment, nilai hitungan bertambah sesuai seperti yang ditunjukkan pada gambar keluaran di bawah ini.

Apa itu direktif ng-show?

Direktif ng-Show digunakan untuk menampilkan atau menyembunyikan elemen HTML tertentu berdasarkan ekspresi yang diberikan ke atribut ngShow. Di latar belakang, elemen ditampilkan atau disembunyikan dengan menghapus atau menambahkan kelas CSS .ng-hide ke elemen.

Di latar belakang, elemen ditampilkan atau disembunyikan dengan menghapus atau menambahkan kelas CSS .ng-hide ke elemen.

Mari kita lihat contoh bagaimana kita bisa menggunakan direktif "ngshow event" untuk menampilkan elemen tersembunyi.

Event Registration

Guru99 Global Event




Angular

Penjelasan Kode:

  1. Kami melampirkan arahan acara ng-click ke elemen tombol. Di sini kami mereferensikan sebuah fungsi yang disebut "ShowHide" yang didefinisikan dalam kontroler kami - DemoController.
  2. Kami melampirkan atribut ng-show ke tag div yang berisi teks Angular. Ini adalah tag yang akan kita tampilkan / sembunyikan berdasarkan atribut ng-show.

  3. Di pengontrol, kami melampirkan variabel anggota "IsVisible" ke objek lingkup. Atribut ini akan diteruskan ke atribut angular ng-show (langkah # 2) untuk mengontrol visibilitas kontrol div. Kami awalnya menyetel ini ke false sehingga saat halaman pertama kali ditampilkan, tag div akan disembunyikan.

    Catatan: - Ketika atribut ng-show disetel ke true, kontrol selanjutnya yang dalam kasus kami adalah tag div akan ditampilkan kepada pengguna. Ketika atribut ng-show disetel ke false, kontrol akan disembunyikan dari pengguna.

  4. Kami menambahkan kode ke fungsi ShowHide yang akan mengatur variabel anggota IsVisible menjadi true sehingga tag div dapat ditampilkan kepada pengguna.

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

Hasil: 1

Dari keluarannya,

  • Awalnya Anda dapat melihat bahwa tag div yang memiliki teks "AngularJS" tidak ditampilkan dan ini karena objek cakupan isVisible awalnya disetel ke false yang kemudian diteruskan ke arahan ng-show dari tag div.
  • Ketika Anda mengklik tombol "Show AngularJS", variabel anggota isVisible akan berubah menjadi true dan teks "Angular" menjadi terlihat oleh pengguna. Output di bawah ini akan ditampilkan kepada pengguna.

Outputnya sekarang menunjukkan tag div dengan teks Angular.

Apa itu direktif ng-hide?

Dengan direktif ng-hide, sebuah elemen akan disembunyikan jika ekspresi TRUE. Jika Ekspresi SALAH, elemen akan ditampilkan. Di latar belakang, elemen ditampilkan atau disembunyikan dengan menghapus atau menambahkan kelas CSS .ng-hide ke elemen.

Di sisi lain dengan ng-hide, elemen disembunyikan jika ekspresi benar dan akan ditampilkan jika salah.

Mari kita lihat contoh serupa seperti yang ditunjukkan untuk ngShow untuk menunjukkan bagaimana atribut ngHide dapat digunakan.

Event Registration

Guru99 Global Event




Angular

Penjelasan Kode:

  1. Kami melampirkan arahan acara ng-click ke elemen tombol. Di sini kami mereferensikan fungsi yang disebut ShowHide yang didefinisikan di controller kami - DemoController.
  2. Kami melampirkan atribut ng-hide ke tag div yang berisi teks Angular. Ini adalah tag yang akan kita tampilkan / sembunyikan berdasarkan atribut ng-show.
  3. Di pengontrol, kami melampirkan variabel anggota isVisible ke objek lingkup. Atribut ini akan diteruskan ke atribut angular ng-show untuk mengontrol visibilitas kontrol div. Kami awalnya menyetel ini ke false sehingga saat halaman pertama kali ditampilkan, tag div akan disembunyikan.
  4. Kami menambahkan kode ke fungsi ShowHide yang akan mengatur variabel anggota IsVisible menjadi true sehingga tag div dapat ditampilkan kepada pengguna.

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

Keluaran:

Dari keluarannya,

  • Anda awalnya dapat melihat bahwa tag div yang memiliki teks "AngularJs" pada awalnya ditampilkan karena nilai properti false dikirim ke direktif ng-hide.
  • Ketika kita mengklik tombol "Hide Angular", nilai properti true akan dikirim ke direktif ng-hide. Oleh karena itu, output di bawah ini akan ditampilkan, di mana kata "Angular" akan disembunyikan.

Arahan Pemroses Acara AngularJS

Anda dapat menambahkan event listener AngularJS ke elemen HTML Anda dengan menggunakan satu atau beberapa arahan berikut:

  • ng-blur
  • ng-berubah
  • ng-klik
  • ng-copy
  • ng-potong
  • ng-dblclick
  • ng-fokus
  • ng-keydown
  • ng-menekan tombol
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-gerakan mouse
  • ng-mouseup
  • ng-paste

Ringkasan

  • Peristiwa direktif digunakan di Angular untuk menambahkan kode khusus untuk menanggapi peristiwa yang dihasilkan oleh intervensi pengguna seperti klik tombol, klik keyboard dan mouse, dll.
  • Direktif event yang paling umum adalah direktif ng-click yang digunakan untuk menangani event klik. Penggunaan yang paling umum dari ini adalah untuk klik tombol di mana kode dapat ditambahkan untuk menanggapi klik tombol.
  • Elemen HTML juga dapat disembunyikan atau ditampilkan kepada pengguna dengan menggunakan atribut sudut ng-show dan ng-hide.