HTML events in Angular JS

By | August 25, 2017

You can add AngularJS event listeners to your HTML elements by using one or more 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

Events in Angular JS

Example

[html]
< !DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head><head>
<title>Angular JS Controller</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
<h2>AngularJS Demo Application</h2>

<div ng-app="MyApp" ng-controller="MyController" ng-init="test()">

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

<h2>{{ count }}</h2>

<h1 ng-mousemove="myFunc($event)">Mouse Over Me! with Event</h1>

<p>Coordinates: {{x + ‘, ‘ + y}}</p>

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

<p>{{ clickCount }}</p>

<button ng-click="toggleShow()">Click to Toggle Show</button>

<p ng-show="show"> Toggle Me </p>

</div>

<script>

var app = angular.module("MyApp", []);

$scope.count = 0;
$scope.clickCount = 0;

$scope.myFunc = function($event) {
$scope.x = event.clientX;
$scope.y = event.clientY;
}

$scope.toggleShow = function(){
$scope.show = !$scope.show;
}

});

</script>

</body>
</html>
[/html]

Leave a Reply

Your email address will not be published. Required fields are marked *