এঙ্গুলারজেএস ইভেন্ট - AngularJS Event
AngularJS এর নিজস্ব এইচটিএমএল ইভেন্ট ডিরেক্টিভ রয়েছে।
AngularJS ইভেন্ট
নিম্নোক্ত ডিরেক্টিভসমূহ আপনার এইচটিএমএলে যোগ করে আপনি AngularJS ইভেন্টে লিসেনার যোগ করতে পারেনঃ
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
ইভেন্ট ডিরেক্টিভ ইউজার কর্তৃক নির্দিষ্ট ইভেন্টে AngularJS ফাংশন রান করানোর সম্মতি দেয়।
AngularJS ইভেন্ট এইচটিএমএল ইভেন্টকে ওভাররাইট করে না, উভয় ইভেন্টই সম্পাদিত হয়।
মাউস ইভেন্ট
যখন মাউস কার্সর কোনো এলিমেন্টের উপর নড়ানো হয় তখন মাউস ইভেন্ট ঘটে।
যেমন-- ng-mouseenter
- ng-mouseover
- ng-mousemove
- ng-mouseleave
অথবা যখন একটি এলিমেন্টের উপর মাউস বাটন ক্লিক করা হয়।
যেমন-- ng-mousedown
- ng-mouseup
- ng-click
যেকোনো এইচটিএমএল এলিমেন্টে আপনি মাউস ইভেন্ট যোগ করতে পারেন।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3 ng-mousemove="count = count + 3">এখানে মাউস আনুন</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
ফলাফল
ng-clickডিরেক্টিভ
ng-click >ডিরেক্টিভ AngularJS কোড এক্সিকিউট করা নির্ধারণ করে যখন এলিমেন্ট ক্লিক করা হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">এখানে ক্লিক করুন</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
ফলাফল
এছাড়াও আপনি ফাংশনকে রেফার করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">এখানে ক্লিক করুন</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>
</body>
</html>
ফলাফল
Subjects শো বা হাইড করার জন্য বাটনে ক্লিক করুনঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">এখানে ক্লিক করুন</button>
<div ng-show="showMe">
<h3>Subjects</h3>
<div>Bangla</div>
<div>English</div>
<div>Mathematices</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>
</body>
</html>
ফলাফল
showMe ভ্যারিয়েবল বুলিয়ান ভ্যালু false দিয়ে শুরু হয়।
myFunc ফাংশন showMe ভ্যারিয়েবলের মান ! (not) অপারেটর দ্বারা বিপরীত মান সেট করে।
$event অবজেক্ট
আপনি $event অবজেক্টকে ফাংশন কল করার সময় আর্গুমেন্ট হিসেবে পাস করাতে পারেন।
$event অবজেক্ট ব্রাউজারের ইভেন্ট অবজেক্ট সংরক্ষন করে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3 ng-mousemove="myFunc($event)">এখানে মাউস আনুন</h3>
<p>Coordinates: {a + ', ' + b}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunc = function(myE) {
$scope.a = myE.clientX;
$scope.b = myE.clientY;
}
});
</script>
</body>
</html>
ফলাফল