WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Events


AngularJS has its own HTML occasions directives.


AngularJS Events

You can add AngularJS occasion audience members to your HTML components by utilizing one or a greater amount 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 occasion orders enables us to run AngularJS capacities at certain client events.

An AngularJS occasion won't overwrite a HTML occasion, the two occasions will be executed.


Mouse Events

Mouse occasions happen when the cursor moves over a component, in this order:

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

Or when a mouse catch is tapped on a component, in this order:

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

You can include mouse occasions any HTML element.

Example

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

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = tally + 1">Mouse over me!</h1>

<h2>{{ tally }}</h2>

</div>
<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>
Try it Yourself »

The ng-click Directive

The ng-click order characterizes AngularJS code that will be executed when the component is being clicked.

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = tally + 1">Click me!</button>

<p>{{ tally }}</p>

</div>
<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>
Try it Yourself »

You can likewise allude to a function:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ tally }}</p>

</div>
<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.myFunction = work() {
        $scope.count++;
    }
});
</script>
Try it Yourself »

Toggle, True/False

If you need to demonstrate an area of HTML code when a catch is clicked, and cover up when the catch is clicked once more, similar to a dropdown menu, make the catch carry on like a flip switch:

Menu:

Pizza
Pasta
Pesce

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 application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe = false;
    $scope.myFunc = work() {
        $scope.showMe = !$scope.showMe;
    }
});
</script>
Try it Yourself »

The showMe variable begins as the Boolean esteem false.

The myFunc work sets the showMe variable to the inverse of what it is, by utilizing the ! (not) operator.


$event Object

You can pass the $event object as a contention when calling the function.

The $event object contains the program's occasion 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 application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myFunc = function(myE) {
        $scope.x = myE.clientX;
        $scope.y = myE.clientY;
    }
});
</script>
Try it Yourself »