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.
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.
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.
Following is the example of using ng-blur event to call function when input control lost its focus in angularjs applications.
<!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.
Following is the result of using ng-blur event to call function in angularjs applications.