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

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>
<div ng-app="myApp" ng-controller="myctrl">
<h2>ng-blur Event Directive Example</h2>
Enter Text: <input type="text" ng-blur="fireEvent()" /><br />
<br />

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



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>

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



Hope these examples help..

No comments:
Write comments

Popular Posts