HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Acara AngularJS

❮ Sebelumnya Berikutnya ❯

AngularJS memiliki arahan acara HTML sendiri.

Acara AngularJS

Anda dapat menambahkan pendengar acara AngularJS ke elemen HTML Anda dengan menggunakan satu atau beberapa arahan 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

Arahan acara memungkinkan kita untuk menjalankan fungsi AngularJS di acara pengguna tertentu.

Acara AngularJS tidak akan menimpa acara HTML, kedua acara akan dieksekusi.

Acara Tikus

Peristiwa mouse terjadi ketika kursor bergerak di atas elemen, dalam urutan ini:

  1. dari mouseover
  2. dari-mouseenter
  3. ng-mousemove
  4. ng-mouseleave

Atau ketika tombol mouse diklik pada suatu elemen, dalam urutan ini:

  1. dari-mousedown
  2. dari-mouseup
  3. klik

Anda dapat menambahkan acara mouse pada elemen HTML apa pun.

Contoh

Tingkatkan variabel hitungan saat mouse bergerak di atas elemen H1:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Arahan klik

Arahan ng-click mendefinisikan kode AngularJS yang akan dieksekusi ketika elemen diklik.

Contoh

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Anda juga dapat merujuk ke suatu fungsi:

Contoh

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</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>

Beralih, Benar/Salah

Jika Anda ingin menampilkan bagian kode HTML saat tombol diklik, dan sembunyikan saat tombol diklik lagi, seperti menu tarik-turun, buat tombol berperilaku seperti sakelar sakelar:

Menu:

Pizza
Pasta
Pesce

Contoh

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
  <h1>Menu:</h1>
  <div>Pizza</div>
  <div>Pasta</div>
  <div>Pesce</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>

Variabel showMedimulai sebagai nilai Boolean false.

Fungsi myFuncmengatur showMevariabel ke kebalikannya, dengan menggunakan !operator (bukan).

$event Obyek

Anda dapat meneruskan $eventobjek sebagai argumen saat memanggil fungsi.

Objek $eventberisi objek acara browser:

Contoh

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{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>

❮ Sebelumnya Berikutnya ❯