انگولار جی ایس ایونٹ

انگولار جی ایس اپنے ہی ایچ تی ایمل ایوینٹ انکریمنٹوں کو رکھتا ہے.

انگولار جی ایس ایونٹ

آپ کو انگولار جی ایس ایوینٹ لیستنر کو اپنے ایچ تی ایمل ایلیمنٹ میں شامل کرنے کے لئے درج کی گئی ہمراہ کئی انکریمنٹوں سے کسی ایک یا کچھ کو استعمال کردیگا:

• 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

آپ کسی بھی HTML عنصر پر موس کا واقعات کو منسلک کرسکتے ہیں۔

مثال

جب موس کو ایچ1 عنصر پر موحکم کیا جائے گا تو 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">کلیک کریں!</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()">کلیک کریں!</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>

خود کو کچھ کریں

تغییر، حقیقی/مزعوم

اگر آپ چاہتے ہیں کہ کلک کئے جانے پر کچھ حصے کا HTML کو دکھایا جائے اور دوبارہ کلک کئے جانے پر پنهان کیا جائے، جیسا کہ ڈروپ ڈاؤن مینیو کی طرح، تو بٹن کو چینی سوئچ کی طرح بنائیں:

مثال

<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>کوآرڈینٹس: {{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>

خود کو کچھ کریں