Disable adalah suatu kondisi elemen atau objek yang tidak aktif. Dimana pada kesempatan kali ini saya akan membahas tentang Cara Membuat Tombol Disable Dengan AngularJs. Dan yang akan saya buat disable adalah sebuah tombol atau button dengan menggunakan ng-disabled yang ada pada angularjs.Langkah pertama Cara Membuat Tombol Disable Dengan AngularJs yaitu saya akan membuat struktur htmlnya seperti script di bawah ini.
<!DOCTYPE html> <html> <head> <title>Cara Membuat Tombol Disable Dengan AngularJs</title> </head> <body> <div> <p>Cara Membuat Tombol Disable Dengan AngularJs</p> <button>Klik Saya!</button> <br> <input type="checkbox" />Nonaktifkan Tombol <p></p> </div> </body> </html>
Jika sudah jangan lupa cantumkan link angularjs di bawah ini kedalam tag head pada html.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
Jika sudah maka kita aktifkan angularjs dengan menggunakan ng-app di dalam tag body seperti pada script di bawah ini.
<body ng-app>
Dan untuk tag div saya berikan ng-init dengan nama parameter status bernilai true atau benar secara default. Berikut ini adalah scriptnya.
<div ng-init="status=true">
Langkah selanjutnya saya berikan ng-disabled pada sebuah tombol dengan nama parameter sesuai dengan nama parameter di tag div. Karena nilai status secara defaultnya adalah true. Maka tombol akan disable atau tidak aktif.
<button ng-disabled="status">Klik Saya!</button>
Dan untuk mengubah nilai dari status true menjadi false maka saya berikan ng-model di dalam input checkbox yang sudah dibuat sebelumnya seperti pada script di bawah ini.
<input type="checkbox" ng-model="status"/>Nonaktifkan Tombol
Dimana ketika checkbox saya uncheck maka nilai status akan berubah menjadi false dan secara otomatis ng-disabled yang ada di button atau tombol pun bernilai false juga. Dan dengan kata lain tombol akan kembali aktif atau bisa di klik.
Agar lebih jelasnya nilai dari status bernilai true atau false maka saya akan mencetaknya di tag p yang sudah disediakan dengan menggunakan expression seperti di bawah ini.
<p>{{ status }}</p>
Jika teman-teman buka di browser maka tampilannya akan seperti pada gambar di bawah ini.
Tampilan tombol nonaktif atau disabled.
Tampilan tombol aktif atau able.
Demikian artikel tentang Cara Membuat Tombol Disable Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.