AngularJS memiliki sendiri HTML peristiwa arahan nya.
Acara AngularJS
Anda dapat menambahkan AngularJS acara pendengar untuk elemen HTML Anda dengan menggunakan satu atau lebih dari arahan 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
Acara arahan memungkinkan kita untuk menjalankan fungsi AngularJS di acara-acara pengguna tertentu.
Sebuah acara AngularJS tidak akan menimpa sebuah acara HTML, kedua acara akan dieksekusi.
mouse Acara
peristiwa mouse terjadi ketika kursor bergerak lebih elemen, dalam urutan ini:
- ng-mouseenter
- ng-mouseover
- ng-mousemove
- ng-mouseleave
Atau ketika tombol mouse diklik pada elemen, dalam urutan ini:
- ng-mousedown
- ng-mouseup
- ng-klik
Anda dapat menambahkan acara mouse pada setiap elemen HTML.
Contoh
Meningkatkan variabel count ketika 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> Cobalah sendiri " The ng-klik Directive
The ng-click direktif mendefinisikan kode AngularJS yang akan dijalankan ketika elemen tersebut 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> Cobalah sendiri " Anda juga dapat merujuk ke 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> Cobalah sendiri " Beralih, Benar / Salah
Jika Anda ingin menampilkan bagian kode HTML ketika tombol diklik, dan menyembunyikan ketika tombol diklik lagi, seperti menu dropdown, membuat tombol berperilaku seperti beralih beralih:
Menu:
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> Cobalah sendiri " The showMe variabel dimulai sebagai nilai Boolean false .
The myFunc fungsi menetapkan showMe variabel untuk kebalikan dari apa itu, dengan menggunakan ! (Tidak) operator.
$ Acara Object
Anda dapat melewati $event objek sebagai argumen saat memanggil fungsi.
The $event objek berisi 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>
Cobalah sendiri "