AngularJS กิจกรรม

অ্যাংগুলারজেসকে তার নিজস্ব এইচটিএমএল ইভেন্ট ইনস্ট্রাকশন রয়েছে。

AngularJS กิจกรรม

একটি বা একাধিক ইনস্ট্রাকশনকে ব্যবহার করে আপনি এইভাবে আপনার এইচটিএমএল ইলেকট্রনমে অ্যাংগুলারজেস ইভেন্ট লিস্টিনার যোগ করতে পারেন:

• 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

ইভেন্ট ইনস্ট্রাকশন অ্যাংগুলারজেস ফাংশনগুলিকে কিছু ব্যবহারকারী ইভেন্টের উপর চালানোর জন্য অনুমতি দেয়।

অ্যাংগুলারজেস ইভেন্টগুলি এইচটিএমএল ইভেন্টগুলিকে অবরূপণ করবে না, দুটি ইভেন্টগুলি দুটিই বাস্তবায়িত হবে।

মাউস ইভেন্ট

এলিমেন্টের ওপর কার্যকর হয়ে যাওয়ার সময়, মাউস ইভেন্টগুলি নিচের ক্রমে ঘটবে:

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

বা, এলিমেন্টটিকে ক্লিক করার সময়, নিচের ক্রমে ইভেন্টগুলি ট্রিগার করা হবে:

• ng-mousedown
• ng-mouseup
• ng-click

আপনি যে কোনও এইচটিএমএল এলিমেন্টের ওপর মাউস ইভেন্ট যোগ করতে পারেন

ตัวอย่าง

একটি এইচ১ এলিমেন্টের ওপর মাউস সরানোর সময় count বিন্যাসটি বৃদ্ধি করা হবে:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">মাউসকে আমার ওপর নিয়ে যান!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

ลองด้วยตัวเอง

ng-click ইনস্ট্রাকশন

ng-click ইনস্ট্রাকশনটি ইউনগুলিস ১০টি এলিমেন্টকে ক্লিক করার সময় একটি অ্যাংগুলারজেস কোডটি বাস্তবায়িত করে

ตัวอย่าง

<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>

ลองด้วยตัวเอง

আপনি একটি ফাংশনও উল্লেখ করতে পারেন:

ตัวอย่าง

<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>

ลองด้วยตัวเอง

টাইপান্ট, সত্য/মিথ্যা

আপনি যদি বাটন ক্লিক করার সময় একটি অংশ এইচটিএমএল কোডটি দেখাতে চান এবং পুনরায় ক্লিক করার সময় তা লুকাতে চান, যেমন ড্রপডাউন মেনুর মতো, তবে বাটনটিকে সুইচ হিসাবে দেখানো হবে:

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">ক্লিক করুন!</button>  
<div ng-show="showMe">  
  <h1>মেনু：</h1>  
  <div>পিজা</div>  
  <div>ইতালীয় মুদি</div>  
  <div>মৎস্য</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>

ลองด้วยตัวเอง

showMe বিন্যাসটি শুরু করার সময় বলুয়া মান হয় false。

myFunc ফাংশনটিকে !বিপরীত (একক) অপারেটর, যা showMe বিন্যাস হলে তার বর্তমান মানের বিপরীত মান হবে。

$event অবজেক্ট

ফাংশন বোলা সময় $event একটি অবজেক্ট পারামিট হিসাবে পাঠানো হয়。

$event องค์ประกอบนี้มีองค์ประกอบเหตุการณ์ของเบราเซอร์

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">เคลื่อนที่เมาส์ขึ้นยังด้านบนของฉัน!</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>

ลองด้วยตัวเอง