Shape Shape

Tutorial AngularJS #17 : AngularJS Events

Shape
Shape
Shape Shape
21 Nov, 2023 27 AngularJS

Tutorial AngularJS #17 : AngularJS Events

img-data

AngularJS Events

AngularJS menyediakan banyak cara untuk menangani peristiwa (events) di dalam aplikasi web. Beberapa cara utama untuk menangani peristiwa di AngularJS termasuk:

1. ng-click

Menggunakan directive ng-click untuk menangani peristiwa klik pada elemen HTML.

Contoh:

htmlCopy code
<button ng-click="myFunction()">Klik saya</button>

2. ng-change

Directive ng-change digunakan untuk menangani perubahan nilai pada elemen input, seperti input tipe teks atau elemen select.

Contoh:

htmlCopy code
<input type="text" ng-model="myValue" ng-change="valueChanged()">

3. ng-submit

Untuk menangani pengiriman formulir, digunakan directive ng-submit pada elemen form.

Contoh:

htmlCopy code
<form ng-submit="submitForm()"> <!-- Isian formulir --> <button type="submit">Kirim</button> </form>

4. ng-keyup/ng-keydown/ng-keypress

Directive seperti ng-keyup, ng-keydown, dan ng-keypress memungkinkan penanganan peristiwa ketika pengguna menekan atau melepaskan tombol pada keyboard.

Contoh:

htmlCopy code
<input type="text" ng-keyup="keyUpHandler($event)">

5. ng-mouseover/ng-mouseleave/ng-mouseenter/ng-mouseout

Untuk menangani peristiwa yang terjadi ketika pengguna melakukan interaksi dengan mouse, seperti ng-mouseover untuk saat mouse masuk ke elemen, ng-mouseleave saat mouse keluar, ng-mouseenter untuk saat mouse memasuki elemen, dan ng-mouseout untuk saat mouse keluar dari elemen.

Contoh:

htmlCopy code
<div ng-mouseover="mouseOverHandler()" ng-mouseleave="mouseLeaveHandler()"> Hover me! </div>

6. $event Object

Anda juga dapat menggunakan $event object untuk menangani informasi spesifik tentang peristiwa yang terjadi, seperti posisi mouse, keycode, dll.

Contoh:

htmlCopy code
<button ng-click="handleClick($event)">Klik saya</button>

Ini adalah beberapa cara utama untuk menangani peristiwa di dalam AngularJS. Dengan menggunakan directive khusus, Anda dapat dengan mudah menambahkan logika yang relevan untuk berbagai peristiwa yang terjadi dalam aplikasi web Anda.

Shape Shape

Tutorial Selengkapnya

Ready to start?

Download our mobile app. for easy to start your course.

Shape
  • Google Play
  • App Store