Acara AngularJS

AngularJS memiliki perintah acara HTML sendiri.

Acara AngularJS

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

  • 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 kami untuk menjalankan fungsi AngularJS di atas peristiwa pengguna tertentu.

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

Peristiwa mouse

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

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

atau, saat elemen di klik mouse, akan dijalankan berikut urutan:

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

Anda dapat menambahkan peristiwa mouse ke setiap elemen HTML.

Contoh

Tambahkan variabel count saat kursor bergerak di atas elemen H1:

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

Cuba Sendiri

Intruksi ng-click

ng-click Intruksi mendefinisikan kode AngularJS yang akan dijalankan 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>

Cuba Sendiri

Anda juga dapat mengutip 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>

Cuba Sendiri

Pindah, benar/ salah

Jika Anda ingin menampilkan sebagian kode HTML saat mengklik tombol dan menyembunyikan kembali saat di klik lagi, seperti menu yang tergulur, gunakan tombol untuk menunjukkan seperti pengubah:

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>Spaghetti</div>  
  <div>Orca</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>

Cuba Sendiri

showMe Variabel mulai dengan nilai boolean false.

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

$event objek

Panggil fungsi apabila boleh memasukkan $event Objek disampaikan sebagai parameter.

$event Objek mengandungi objek acara pelayar:}}

Contoh

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Pindahkan Kursor ke 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>

Cuba Sendiri