Arahan AngularJS ng-click, ng-show & ng-hide dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

Acara AngularJS

Acara AngularJS adalah fungsi yang memungkinkan aplikasi web berinteraksi dengan masukan pengguna seperti klik mouse, masukan keyboard, arahkan mouse, dll. Peristiwa perlu ditangani dalam aplikasi berbasis web untuk melakukan tugas dan tindakan tertentu. Ini dipicu ketika tindakan tertentu dilakukan oleh pengguna.

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

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

Misalnya, jika ada tombol pada halaman dan Anda ingin memproses sesuatu ketika tombol tersebut diklik, kita dapat menggunakan direktif event Angular ng-click.

Kami akan melihat arahan Acara secara detail selama kursus ini.

Apa itu Petunjuk ng-klik di AngularJS?

“perintah ng-klik” di AngularJS digunakan untuk menerapkan perilaku khusus ketika sebuah elemen dalam HTML diklik. Arahan ini biasanya digunakan untuk tombol karena ini adalah cara paling umum untuk menambahkan peristiwa yang merespons klik yang dilakukan oleh pengguna. Ini juga digunakan untuk memunculkan peringatan ketika sebuah tombol diklik.

Sintaks ng-klik di AngularJS

<element
 ng-click="expression">
</element>

Mari kita lihat contoh sederhana bagaimana kita mengimplementasikan event click.

Contoh ng-klik di AngularJS

Dalam Contoh ng-klik ini, kita akan memiliki variabel penghitung yang nilainya akan bertambah ketika pengguna mengklik tombol.

ng-klik Petunjuk di AngularJS
Contoh ng klik di AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Penjelasan Kode:

  1. Pertama-tama kita menggunakan direktif ng-init untuk menyetel nilai variabel lokal count ke 0.
  2. Kami kemudian memperkenalkan arahan acara ng-klik ke tombol. Dalam arahan ini, kami menulis kode untuk menambah nilai variabel count sebesar 1.
  3. Di sini kami menampilkan nilai variabel count kepada pengguna.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

ng-klik di AngularJS

Dari keluaran di atas,

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

ng-klik di AngularJS

ARTIKEL TERKAIT

Apa itu Petunjuk ng-show di AngularJS?

ng-Tampilkan arahan di AngularJS digunakan untuk menampilkan atau menyembunyikan spesifik tertentu HTML elemen berdasarkan ekspresi yang diberikan ke atribut ng-show. Di latar belakang, elemen HTML ditampilkan atau disembunyikan dengan menghapus atau menambahkan kelas CSS .ng-hide ke elemen tersebut. Ini adalah kelas CSS yang telah ditentukan sebelumnya yang tidak menyetel tampilan.

Sintaks ng-show di AngularJS

<element
 ng-show="expression">
</element>

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

Contoh ng-show di AngularJS

Mari kita lihat ng-show di Contoh Angular tentang bagaimana kita dapat menggunakan direktif “ngshow event” untuk menampilkan elemen tersembunyi.

Petunjuk ng-show di AngularJS

Contoh pertunjukan ng di Angular
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Penjelasan Kode:

  1. Kami melampirkan direktif acara ng-klik ke elemen tombol. Di sini kami mereferensikan fungsi yang disebut “ShowHide” yang didefinisikan di pengontrol 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 dalam kontroler, kita melampirkan variabel anggota “IsVisible” ke objek cakupan. Atribut ini akan diteruskan ke atribut angular ng-show (langkah #2) untuk mengontrol visibilitas kontrol div. Awalnya kita menyetelnya 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 kita 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 AngularJS show hide div on click dapat ditampilkan kepada pengguna.

Jika kode untuk ng-show dan ng-hide di AngularJS berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Hasil: 1

Petunjuk ng-show di AngularJS

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 direktif ng-show dari tag div.
  • Saat Anda mengklik tombol “Tampilkan AngularJS”, ini mengubah variabel anggota isVisible menjadi true dan karenanya teks “Angular” menjadi terlihat oleh pengguna. Output di bawah ini akan ditampilkan kepada pengguna.

Petunjuk ng-show di AngularJS

Outputnya sekarang menunjukkan tag div dengan teks Angular.

Apa itu Petunjuk ng-hide di AngularJS?

arahan ng-sembunyikan di AngularJS adalah fungsi yang menggunakan elemen yang akan disembunyikan jika ekspresinya TRUE. Jika Ekspresinya FALSE, elemen tersebut akan ditampilkan. Di latar belakang, elemen ditampilkan atau disembunyikan dengan menghapus atau menambahkan kelas CSS .ng-hide ke elemen.

Sintaks ng-hide di AngularJS

<element
 ng-hide="expression">
</element>

Sebaliknya dengan ng-hide, elemen disembunyikan jika ekspresi benar dan akan ditampilkan jika salah.

Contoh ng-sembunyikan di AngularJS

Mari kita lihat Contoh ng-hide yang serupa dengan yang ditunjukkan pada ngShow untuk menunjukkan bagaimana atribut ng-hide dan ng-show dapat digunakan.

Petunjuk ng-hide di AngularJS

Contoh ng-sembunyikan di AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Penjelasan Kode:

  1. Kami melampirkan direktif acara ng-klik ke elemen tombol. Di sini kami mereferensikan fungsi bernama ShowHide yang didefinisikan di pengontrol kami – DemoController.
  2. Kami melampirkan atribut ng-hide ke tag div yang berisi teks Angular. Ini adalah tag yang akan kita gunakan untuk menampilkan hide di Angular berdasarkan atribut ng-show.
  3. Di dalam kontroler, kita melampirkan variabel anggota isVisible ke objek cakupan. Atribut ini akan diteruskan ke atribut angular ng-show untuk mengontrol visibilitas kontrol div. Awalnya kita menyetelnya ke false sehingga saat halaman pertama kali ditampilkan, tag div akan disembunyikan.
  4. Kami menambahkan kode ke fungsi ShowHide yang akan menyetel variabel anggota IsVisible ke true sehingga tag div dapat ditampilkan kepada pengguna.

Jika kode untuk ng show hide berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Petunjuk ng-hide di AngularJS

Dari keluarannya,

  • Anda awalnya dapat melihat bahwa tag div yang memiliki teks “AngularJs” 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.

Petunjuk ng-hide di AngularJS

Arahan Pendengar Acara AngularJS

Anda dapat menambahkan pendengar acara AngularJS ke elemen HTML Anda dengan menggunakan satu atau lebih elemen ini arahan:

  • ng-kabur
  • ng-ubah
  • ng-klik
  • ng-salin
  • ng-potong
  • ng-dblklik
  • ng-fokus
  • ng-keydown
  • ng-tekan tombol
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-tinggalkan tikus
  • ng-mousemove
  • ng-arahkan mouse
  • ng-mouseup
  • ng-tempel

Ringkasan

  • Arahan peristiwa digunakan di Angular untuk menambahkan kode khusus guna merespons peristiwa yang dihasilkan oleh intervensi pengguna seperti klik tombol, klik keyboard dan mouse, dll.
  • Direktif kejadian yang paling umum adalah direktif ng-klik AngularJS yang digunakan untuk menangani kejadian klik. Penggunaan paling umum dari ini adalah untuk klik tombol AngluarJS dimana kode dapat ditambahkan untuk merespons klik tombol.
  • Elemen HTML juga dapat disembunyikan atau ditampilkan kepada pengguna dengan menggunakan Petunjuk ng-show AngularJS, Petunjuk Angular ng-hide dan atribut ng-visibel.

Buletin Harian Guru99

Awali hari Anda dengan berita AI terbaru dan terpenting yang disampaikan saat ini.