AngularJS Events


Angular JS event listner can be added to html elements by using below evens

Events are sepcified based on category.
  • MOUSE EVENTS
    • ng-click
    • ng-dblclick
    • ng-mousedown
    • ng-mouseup
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-mouseover
  • KEYBOARD EVENTS
    • ng-keydown
    • ng-keyup
    • ng-keypress
    • ng-focus
  • CHANGE EVENTS
    • ng-change

ng-click Directive

By name we can say this action will be executed by click. Enjoy below example.

Name will be appended each and every time when you click on button.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

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

		<button ng-click="name = name + 'Soha '">Click Me!</button>

		<p>{{ name }}</p>

	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.name = 'Soha ';
		});
	</script>

</body>
</html>

ng-mouseenter,ng-mouseleave Directive

These are two opposite directives. When enter into specific area that will be ng-mouseenter, when you leave that will be ng-mouseleave.

You can observe that welcome message will be disappear and appear based on ng-mouseleave and ng-mouseenter using below example.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

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

		<h1 ng-mouseenter="myFunc()" ng-mouseleave="myFunc()">Mouse Over Me!</h1>

		<div ng-show="showMessage">
		    <h1>Welcome to DataStapler.com</h1>
		</div>

	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
		    $scope.showMessage= false;
		    $scope.myFunc = function() {
			$scope.showMessage= !$scope.showMessage;
		    }
		});
	</script>
</body>
</html>

ng-focus Directive

An expression to execute when an element gets focus.

Whatever you enter in input field, will be shown as part of name expression immidiately using ng-focus.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<body ng-app="">

		<p>Name : <input type="text" ng-focus="name" ng-init="name=''" ng-model="name"></p>
		<h1>Hi {{name}}, This is your Hello World Exaple </h1>


	</body>
</html>