ng-blur example in AngularJS

 

       AngularJS ng-blur event directive fires when an input element loses its focus. In case if you want to call an function or fire an event ng-blur helps. This angularjs ng-blur event directive is supported by <input>, <select>, <textarea> elements.
Syntax for ng-blur directive

<element ng-blur="expression">
     your code
</element>

Lets see some simple examples to understand more on ng-blur event.

Example 1 : Display text when input event lost focus
      This piece of code is self explanatory, though few things. Basically we invoke a function "fireEvent" using ng-blur event directive, that in turn displays a message "Input event lost focus"

<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myctrl">
<h2>ng-blur Event Directive Example</h2>
Enter Text: <input type="text" ng-blur="fireEvent()" /><br />
<br />
<p>{{message}}</p>
</div>

<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.fireEvent = function() {
$scope.message = "Input event lost focus";
}
});
</script>

</body>
</html>


Output

Example 2: Display expression value
      In this example instead of static text, we will increment a value (value = value +1) using ng-blur event.

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

<body ng-app="">
<input ng-blur="value = value + 1" />
<h1>{{value}}</h1>
</body>

</html>


Output

Hope these examples help..

No comments:
Write comments

Popular Posts