एंगुलरजेएस इवेंट्स

❮ पहले का अगला ❯

AngularJS के अपने HTML ईवेंट निर्देश हैं।

एंगुलरजेएस इवेंट्स

आप इनमें से एक या अधिक निर्देशों का उपयोग करके अपने HTML तत्वों में 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

घटना निर्देश हमें कुछ उपयोगकर्ता घटनाओं पर AngularJS फ़ंक्शन चलाने की अनुमति देता है।

एक AngularJS ईवेंट एक HTML ईवेंट को अधिलेखित नहीं करेगा, दोनों ईवेंट निष्पादित किए जाएंगे।

माउस घटनाएँ

माउस घटनाएँ तब होती हैं जब कर्सर इस क्रम में किसी तत्व पर चलता है:

माउसओवर का
ऑफ-माउसएंटर
एनजी-माउसमूव
एनजी-माउसलीव

या जब किसी तत्व पर माउस बटन क्लिक किया जाता है, तो इस क्रम में:

ऑफ-मूसडाउन
ऑफ़-माउसअप
क्लिक का

आप किसी भी HTML तत्व पर माउस ईवेंट जोड़ सकते हैं।

उदाहरण

जब माउस H1 तत्व पर चलता है तो गणना चर बढ़ाएँ:

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

क्लिक निर्देश

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>

टॉगल करें, सही/गलत

यदि आप किसी बटन पर क्लिक करने पर HTML कोड का एक भाग दिखाना चाहते हैं, और बटन को फिर से क्लिक करने पर छुपाना चाहते हैं, तो ड्रॉपडाउन मेनू की तरह, बटन को टॉगल स्विच की तरह व्यवहार करें:

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

showMeचर बूलियन मान के रूप में प्रारंभ होता है false।

myFuncफ़ंक्शन (नहीं) ऑपरेटर showMeका उपयोग करके चर को इसके विपरीत सेट करता है ।!

$ईवेंट ऑब्जेक्ट

$eventफ़ंक्शन को कॉल करते समय आप ऑब्जेक्ट को तर्क के रूप में पास कर सकते हैं ।

ऑब्जेक्ट में ब्राउज़र का $eventईवेंट ऑब्जेक्ट होता है:

उदाहरण

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

❮ पहले का अगला ❯

ट्यूटोरियल

उदाहरण

संदर्भ

एंगुलरजेएस इवेंट्स