AngularJS ng-blur Event Function with Example

  Total Views : 1112
  Comments : 0
 
  Keywords : Angularjs ng-blur event example, Angularjs call function in ng-blur event, Angularjs ngblur directive to call function with example, Angularjs call function or validation on ng-blur event

Here we will learn ng-blur event directive in angularjs, how to call function in ng-blur event in angularjs and how to raise validaiton in ng-blur event in angularjs with examples.

AngularJS ng-blur Event Directive

In angularjs ng-blur event is used to fire validation or call function when input element lost its focus or comes outside of element. In case if you want to call a function or fire other event whenever we come out of input element then this ng-blur event is very useful for us. 

Syntax of AngularJS ng-blur Event Directive

Following is the syntax of using ng-blur event to call function in angularjs applications.

 

<element ng-blur="expression">

...your code...

</element>

This angularjs ng-blur event directive is supported by <input>, <select>, <textarea> elements.

AngularJS ng-blur Event Example

Following is the example of using ng-blur event to call function when input control lost its focus in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-blur Event Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('ngblurApp', []);

app.controller('ngblurCtrl', function ($scope) {

$scope.getdetails = function () {

$scope.result = "You Came Out of Control";

}

});

</script>

</head>

<body>

<div ng-app="ngblurApp" ng-controller="ngblurCtrl">

<h2>AngularJs ng-blur Event Directive Example</h2>

Enter Text: <input type="text" ng-blur ="getdetails()" /><br /><br />

<span style="color:Red">{{result}}</span>

</div>

</body>

</html>

If you observe above example we added ng-blur event to input textbox control and it will raise event whenever we come out of that control in angularjs application.

Output of AngularJS ng-blur Event Example

Following is the result of using ng-blur event to call function in angularjs applications.

 

Angularjs ng-blur event function directive example result or output

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User