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

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

Your email address will not be published.