Event AngularJS

AngularJS memiliki perintah acara HTML yang dimilikinya sendiri.

Event AngularJS

Anda dapat menambah pemantau peristiwa AngularJS ke elemen HTML Anda dengan menggunakan satu atau beberapa perintah di bawah ini:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Perintah peristiwa memungkinkan kita untuk menjalankan fungsi AngularJS di beberapa peristiwa pengguna.

Peristiwa AngularJS tidak menutupi peristiwa HTML, kedua peristiwa akan dieksekusi.

Peristiwa mouse

Saat kursor bergerak di atas elemen, peristiwa mouse akan terjadi dalam urutan berikut:

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

atau, saat elemen di klik mouse, akan diaktifkan dalam urutan berikut:

  • ng-mousedown
  • ng-mouseup
  • ng-click

Anda dapat menambahkan peristiwa mouse pada setiap elemen HTML.

Contoh

Tingkatkan variabel count saat kursor bergerak di atas elemen H1:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Geser Kursor ke Atas Saya!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Coba sendiri

Instruksi ng-click

ng-click Instruksi mendefinisikan kode AngularJS yang akan dieksekusi saat elemen di klik.

Contoh

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Klik Saya!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Coba sendiri

Anda juga dapat mengambil referensi dari fungsi:

Contoh

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Klik Saya!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

Coba sendiri

Tukar, benar/terbenar

Jika Anda ingin menampilkan bagian kode HTML saat menekan tombol dan menyembunyikan saat ditekan lagi, seperti menu susun, harap lakukan tombol seperti switch:

Klik Saya

Contoh

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Klik Saya!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Seafood</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

Coba sendiri

showMe Variabel mulai dengan nilai boolean false.

myFunc Fungsi melalui penggunaan !Operator (non) untuk memutar showMe Variabel diatur menjadi nilai yang berlawanan dengan nilai saat ini.

$event objek

Panggil fungsi saat dapat memasukkan $event Objek disampaikan sebagai parameter.

$event Objek mengandung objek peristiwa browser:}}

Contoh

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Gerak Kursor di Atas Saya!</h1>
<p>Koordinat: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

Coba sendiri