AngularJS hodisalari
AngularJS’ning o‘z HTML hodisa direktivalari mavjud.
AngularJS hodisalari
Quyidagi direktivalardan bir yoki bir nechtasi yordamida HTML elementlaringizga AngularJS hodisa tinglovchilarini (event listener) qo‘shishingiz mumkin:
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
Hodisa direktivalari ma’lum foydalanuvchi hodisalarida AngularJS funksiyalarini ishga tushirish imkonini beradi.
AngularJS hodisasi HTML hodisasini bekor qilmaydi (ustidan yozmaydi), ikkala hodisa ham bajariladi.
Sichqoncha hodisalari
Sichqoncha hodisalari kursor element ustidan o‘tganda quyidagi tartibda yuz beradi:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
Yoki element ustida sichqoncha tugmasi bosilganda, quyidagi tartibda:
- ng-mousedown
- ng-mouseup
- ng-click
Sichqoncha hodisalarini istalgan HTML elementiga qo‘shishingiz mumkin.
Misol
Sichqoncha H1 elementi ustidan o‘tganda count o‘zgaruvchisini oshiring:
<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>
O‘zingiz sinab ko‘ring »
ng-click direktivasi
ng-click direktivasi element bosilganda bajariladigan AngularJS kodini belgilaydi.
Misol
<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>
O‘zingiz sinab ko‘ring »
Funksiyaga ham murojaat qilishingiz mumkin:
Misol
<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>
O‘zingiz sinab ko‘ring »
Almashtirish (toggle), True/False
Agar tugma bosilganda HTML kodning bir qismini ko‘rsatib, tugma qayta bosilganda uni yashirmoqchi bo‘lsangiz (ochiluvchi menyu kabi), tugmani almashtirgich (toggle switch) kabi ishlaydigan qiling:
Menu:
Misol
<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>
O‘zingiz sinab ko‘ring »
showMe o‘zgaruvchisi dastlab false boolean qiymatiga ega bo‘ladi.
myFunc funksiyasi ! (not) operatori yordamida showMe o‘zgaruvchisini joriy qiymatiga teskari qiymatga o‘rnatadi.
$event obyekti
Funksiyani chaqirishda $event obyektini argument sifatida uzatishingiz mumkin.
$event obyekti brauzerning hodisa (event) obyektini o‘z ichiga oladi:
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!