HTML events in Angular JS

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

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

Leave a Reply Cancel reply