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