এঙ্গুলার জেস জাভাস্ক্রিপ্ট জেকুয়েরি এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
 

এঙ্গুলারজেএস ইভেন্ট - AngularJS Event



AngularJS এর নিজস্ব এইচটিএমএল ইভেন্ট ডিরেক্টিভ রয়েছে।


AngularJS ইভেন্ট

নিম্নোক্ত ডিরেক্টিভসমূহ আপনার এইচটিএমএলে যোগ করে আপনি AngularJS ইভেন্টে লিসেনার যোগ করতে পারেনঃ

  1. ng-blur
  2. ng-change
  3. ng-click
  4. ng-copy
  5. ng-cut
  6. ng-dblclick
  7. ng-focus
  8. ng-keydown
  9. ng-keypress
  10. ng-keyup
  11. ng-mousedown
  12. ng-mouseenter
  13. ng-mouseleave
  14. ng-mousemove
  15. ng-mouseover
  16. ng-mouseup
  17. ng-paste

ইভেন্ট ডিরেক্টিভ ইউজার কর্তৃক নির্দিষ্ট ইভেন্টে AngularJS ফাংশন রান করানোর সম্মতি দেয়।

AngularJS ইভেন্ট এইচটিএমএল ইভেন্টকে ওভাররাইট করে না, উভয় ইভেন্টই সম্পাদিত হয়।


মাউস ইভেন্ট

যখন মাউস কার্সর কোনো এলিমেন্টের উপর নড়ানো হয় তখন মাউস ইভেন্ট ঘটে।

যেমন-
  1. ng-mouseenter
  2. ng-mouseover
  3. ng-mousemove
  4. ng-mouseleave

অথবা যখন একটি এলিমেন্টের উপর মাউস বাটন ক্লিক করা হয়।

যেমন-
  1. ng-mousedown
  2. ng-mouseup
  3. 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> 

ফলাফল