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. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.