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..




Reactions:

0 comments :

Post a Comment