Ng-Show adalah salah satu event dari angularjs. Dimana ng-show ini berfungsi untuk menampilkan atau menyembunyikan suatu elemen. Dan pada artikel kali ini saya akan membahas tentang Cara Menggunakan Ng-Show Pada AngularJs.

Langkah pertama yang harus dilakukan untuk Cara Menggunakan Ng-Show Pada AngularJs kita membuat script angularnya seperti di bawah ini.

Disini saya memebuat sebuah modul angular terlebih dahulu dan kemudian saya lanjutkan membuat controller dari modul app yang mana di dalamnya ada dua parameter dan parameter kedua berisi sebuah function  dengan variable showPaket yang berisi nilai false. Dan ada sebuah fungsi myFunc() yang jika di jalankan maka akan merubah sebaliknya nilai dari showPeket.

Langkah selanjutnya teman-teman buat sebuah  struktur html dan jangan lupa cantumkan link angularjsnya seperti script di bawah ini.

Yang harus di perhatikan disini teman-teman jangan lupa berikan ng-App untuk mengaktifkan angluarjsnya dengan parameter yang sudah dibuat di modul angularjs. Kemudian berikan juga direktif dari ng-controller dengan nama parameter yang sama yang sudah di buat di controller. Di dalam body saya sudah membuat sebuah tombol dengan memberikan direktif ng-click yang mana ketika di klik maka fungsi yang sudah dibuat dengan nama myFunc() akan dijalankan dan saya buat div dengan ng-show yang ada parameter dari variable showPaket untuk menyembunyikan dan menampilkan elemen tersebut.

Jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Cara Menggunakan Ng-Show Pada AngularJs

Jika teman-teman masih bingung, saya akan tampilkan gambar script secara keseluruhan agar lebih paham. Dan ini berikut adalah gambar scriptnya.

Cara Menggunakan Ng-Show Pada AngularJs

Demikian artikel tentang Cara Menggunakan Ng-Show Pada AngularJs.  Semoga dapat bermanfaat dan selamat mencoba.