Arahan AngularJS ng-klik, ng-show & ng-hide

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

Event AngularJS memungkinkan aplikasi web merespons input pengguna seperti klik mouse, penekanan tombol, dan tindakan hover. Direktif seperti ng-click, ng-show, dan ng-hide mengikat perilaku tersebut secara deklaratif dalam markup, bukan melalui listener DOM manual.

  • ️ Penanganan Klik: ng-click melampirkan ekspresi atau fungsi controller ke sebuah elemen, yang paling umum adalah tombol.
  • ️ Tampilan Bersyarat: ng-show menampilkan elemen ketika ekspresinya bernilai benar, sedangkan ng-hide menghapusnya ketika ekspresinya bernilai benar.
  • 🎨 Mekanisme: Kedua arahan tersebut mengaktifkan atau menonaktifkan kelas CSS bawaan ng-hide, yang mengatur properti display menjadi none, sehingga elemen tetap berada di DOM.
  • 🔗 Pengikatan Cakupan: Variabel anggota yang ditempatkan pada $scope mengatur visibilitas, dan mengubahnya di dalam handler akan memperbarui tampilan secara instan.
  • 📋 Rentang Arahan: Delapan belas arahan pendengar mencakup peristiwa pengaburan, perubahan, fokus, keyboard, mouse, tempel, dan kirim.
  • ⚠️ Status Dukungan: AngularJS telah mencapai akhir masa pakainya pada 31 Desember 2021, jadi proyek-proyek baru sebaiknya menargetkan Angular versi modern.
Baca Selengkapnya

AngularJS ng-klik ng-tampilkan ng-sembunyikan Petunjuk

Acara AngularJS

Acara AngularJS Event adalah fungsi yang memungkinkan aplikasi web untuk berinteraksi dengan input pengguna seperti klik mouse, input keyboard, dan kursor mouse. Event harus ditangani dalam aplikasi web untuk melakukan tugas dan tindakan tertentu, dan setiap event dipicu ketika pengguna melakukan tindakan yang sesuai.

Saat membuat aplikasi web, cepat atau lambat aplikasi Anda perlu menangani peristiwa DOM seperti klik dan gerakan mouse, penekanan tombol keyboard, dan peristiwa perubahan. AngularJS menyediakan arahan yang menangani peristiwa-peristiwa ini secara deklaratif.

Sebagai contoh, jika sebuah tombol pada halaman perlu memproses sesuatu saat diklik, direktif event ng-click menyediakan fungsi tersebut.

⚠️ Pemberitahuan dukungan: AngularJS telah mencapai akhir hayat pada 31 Desember 2021 dan tidak menerima patch atau perbaikan keamanan lebih lanjut dari tim Angular. Arahan di bawah ini tetap akurat untuk memelihara aplikasi AngularJS 1.x yang sudah ada; untuk pekerjaan baru, gunakan versi modern. Kaku, di mana arahan-arahan ini digantikan oleh pengikatan peristiwa seperti (click) dan oleh *ngIf.

Apa itu Petunjuk ng-klik di AngularJS?

The “perintah ng-klik” Di AngularJS, `onclick` menerapkan perilaku khusus ketika elemen HTML diklik. Biasanya digunakan pada tombol, karena itu adalah tempat paling umum untuk melampirkan respons klik, dan juga digunakan untuk menampilkan peringatan saat diklik.

Sintaks ng-klik di AngularJS

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

Contoh ng-klik di AngularJS

Dalam contoh ng-click ini, variabel penghitung akan bertambah setiap kali pengguna mengklik tombol.

ng-klik Petunjuk di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Penjelasan:

  1. Direktif ng-init mengatur variabel lokal. count ke 0.
  2. Direktif ng-click pada tombol akan bertambah. count bertambah 1 setiap kali diklik.
  3. Interpolasi {{count}} Menampilkan nilai saat ini kepada pengguna.

Keluaran:

ng-klik di AngularJS

Tombol Tambah ditampilkan dan hitungannya awalnya nol. Mengklik tombol tersebut akan menambah nilai, seperti yang ditunjukkan pada gambar di bawah.

ng-klik di AngularJS

Apa itu Petunjuk ng-show di AngularJS?

The arahan ng-show menampilkan atau menyembunyikan sesuatu HTML Elemen tersebut ditampilkan atau disembunyikan berdasarkan ekspresi yang diberikan pada atribut ng-show. Secara internal, elemen tersebut ditampilkan atau disembunyikan dengan menghapus atau menambahkan ekspresi tersebut. .ng-hide Kelas CSS, kelas yang telah ditentukan sebelumnya yang menetapkan display untuk none.

Sintaks ng-show di AngularJS

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

Contoh ng-show di AngularJS

Contoh ini menggunakan ng-show untuk menampilkan elemen yang tersembunyi.

Petunjuk ng-show di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Penjelasan:

  1. Direktif ng-click pada tombol tersebut merujuk pada sebuah ShowHide fungsi yang didefinisikan dalam pengontrol DemoController.
  2. Atribut ng-show dilampirkan ke div yang berisi teks Angular. Ini adalah elemen yang visibilitasnya dikontrol.
  3. Di dalam pengontrol, IsVisible Variabel anggota ditempatkan pada objek cakupan dan diinisialisasi ke false, sehingga div disembunyikan saat halaman pertama kali dimuat. Dengan ng-show, nilai benar menampilkan elemen dan palsu menyembunyikannya.
  4. The ShowHide himpunan fungsi IsVisible ubah menjadi true agar div tersebut terlihat.

Keluaran:

Petunjuk ng-show di AngularJS

Elemen div yang memuat teks tidak ditampilkan pada awalnya, karena IsVisible Berawal sebagai false. Mengklik Tampilkan Angular Mengatur nilainya menjadi true dan teks akan terlihat.

Petunjuk ng-show di AngularJS

ARTIKEL TERKAIT

Apa itu Petunjuk ng-hide di AngularJS?

The arahan ng-sembunyikan menyembunyikan elemen ketika ekspresinya bernilai TRUE, dan menampilkan elemen ketika ekspresinya bernilai FALSE — kebalikan persis dari ng-show. Secara internal, ia menggunakan hal yang sama. .ng-hide kelas CSS.

Sintaks ng-hide di AngularJS

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

Contoh ng-sembunyikan di AngularJS

Contoh ini mencerminkan contoh ng-show sehingga kedua direktif tersebut dapat dibandingkan secara langsung.

Petunjuk ng-hide di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 = true;
        };
    });
</script>

</body>
</html>

Code Penjelasan:

  1. Direktif ng-click pada tombol tersebut merujuk pada ShowHide fungsi di DemoController.
  2. The ng-sembunyi Atribut tersebut dilampirkan ke div yang berisi teks Angular.
  3. IsVisible diinisialisasi ke falseKarena ini adalah ng-hide dan bukan ng-show, nilai false berarti div tersebut disembunyikan. terlihat saat halaman pertama kali dimuat.
  4. The ShowHide himpunan fungsi IsVisible menjadi true, yang menyembunyikan div.

Keluaran:

Petunjuk ng-hide di AngularJS

Div tersebut ditampilkan awalnya karena nilai false diberikan ke ng-hide. Mengklik Sembunyikan Angular lolos uji dan kata tersebut menghilang.

Petunjuk ng-hide di AngularJS

ng-show vs ng-hide vs ng-if: Perbedaan Utama

Tiga arahan mengontrol apakah pengguna melihat suatu elemen, dan memilih di antara ketiganya memengaruhi perilaku dan kinerja rendering. Dua arahan pertama hanya mengaktifkan/menonaktifkan kelas CSS, sehingga elemen selalu ada di halaman; arahan ketiga menambahkan dan menghapus elemen itu sendiri.

Aspek ng-pertunjukan ng-sembunyi ng-if
Elemen terlihat saat Pernyataan tersebut benar. Ekspresi tersebut salah. Pernyataan tersebut benar.
Elemen dalam DOM Selalu Selalu Hanya jika benar
Metode yang digunakan Toggles .ng-sembunyikan kelas Toggles .ng-sembunyikan kelas Membuat dan menghancurkan elemen
Lingkup anak Berbagi cakupan induk Berbagi cakupan induk Membuat cakupan anak baru
Pengawas saat tersembunyi Masih aktif Masih aktif Dihapus
Terbaik untuk Sering beralih antara konten cahaya Kondisi terbalik Konten berat jarang ditampilkan

Gunakan ng-show atau ng-hide ketika sebuah elemen sering berganti status, karena elemen tersebut tidak pernah dibangun ulang dan pergantian status hanya membutuhkan perubahan kelas. Gunakan ng-if untuk bagian yang memakan banyak sumber daya dan jarang ditampilkan, karena menghapus elemen juga menghapus pengawasnya dan mengurangi biaya digest pada setiap siklus.

Arahan Pendengar Acara AngularJS

Anda dapat menambahkan event listener AngularJS ke elemen HTML menggunakan satu atau lebih dari cara berikut. 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
  • ng-kirim

Setiap arahan menerima sebuah ekspresi, dan peristiwa browser mentah tersedia di dalamnya sebagai $event ketika pengelola memerlukan detail seperti tombol yang ditekan atau koordinat klik.

Pertanyaan Umum Demo Slot

Lewati yang dipesan $event variabel, seperti pada ng-click="handle($event)"Kemudian, controller menerima event native dan dapat membaca target, koordinat, atau memanggil preventDefault.

ng-repeat membuat scope anak untuk setiap item, jadi menetapkan nilai primitif di dalam handler hanya akan memperbarui anak tersebut. Tulis ke properti objek pada scope induk, atau gunakan $parent, agar perubahan tersebut terlihat dari luar.

Sebagian. AI alat mengubah ng-click menjadi (click) dan ng-show untuk *ngIf dapat diandalkan, tetapi logika yang bergantung pada cakupan dan pengikatan dua arah memerlukan tinjauan manual, karena cakupan AngularJS tidak memiliki padanan langsung di Angular.

Asisten AI dengan cepat mendeteksi penyebab umum: ng-app yang hilang, nama controller yang tidak sesuai dengan pendaftaran modul, atau kesalahan pengetikan pada atribut directive. Perbaikan yang disarankan masih perlu diuji di browser.

Tidak. AngularJS hanya menyediakan ng-show, ng-hide, dan ng-if. Tidak ada directive ng-visible, dan merujuknya tidak akan berpengaruh karena AngularJS mengabaikan atribut yang tidak dikenali.

Ringkaslah postingan ini dengan: