Angular Events

AngularJS Events

---

AngularJS has its ain HTML events directives.

---

AngularJS Events

You tin add together AngularJS final result listeners to your HTML elements yesteryear using ane or to a greater extent than of these directives:

• 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

The final result directives allows us to run AngularJS functions at for certain user events.
An AngularJS final result volition non overwrite an HTML event, both events volition survive executed.

---

Mouse Events

Mouse events come about when the cursor moves over an element, inwards this order:

1. ng-mouseenter
2. ng-mouseover
3. ng-mousemove
4. ng-mouseleave

Or when a mouse push is clicked on an element, inwards this order:

1. ng-mousedown
2. ng-mouseup
3. ng-click

You tin add together mouse events on whatsoever HTML element.

Example

Increase the count variable when the mouse moves over the H1 element:

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

---

The ng-click Directive

The ng-click directive defines AngularJS code that volition survive executed when the chemical component is beingness clicked.

Example

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

---

You tin likewise get upward to a function:

Example

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

---

Toggle, True/False

If you lot desire to present a department of HTML code when a push is clicked, in addition to enshroud when the push is clicked again, similar a dropdown menu, brand the push comport similar a toggle switch:

Example

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

The showMe variable starts out every bit the Boolean value false.
The myFunc constituent sets the showMe variable to the contrary of what it is, yesteryear using the ! (not) operator.

---

$event Object

You tin transcend the $event object every bit an declaration when calling the function.
The $event object contains the browser's final result object:

Example

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

---