Angularjs ng blur directive

The ng-blur directive in AngularJS is used to bind a function to the blur event of an HTML element. This event is fired when the element loses focus, which can happen when the user clicks outside the element or presses the Tab key to move to the next element.

Here is an example of using ng-blur with an input element:

<input type="text" ng-model="text" ng-blur="onBlur()">

In this example, the ng-model directive is used to bind the value of the input element to a scope variable called text. The ng-blur directive is used to call the onBlur function whenever the input element loses focus.

You can also use the $event object to access information about the blur event, such as the target element or the new value of the element. Here is an example:

<input type="text" ng-model="text" ng-blur="onBlur($event)">
<p>Last value: {{ lastValue }}</p>

$scope.lastValue = '';

$scope.onBlur = function(event) {
  var target = event.target;
  var newValue = target.value;
  $scope.lastValue = newValue;
};

In this example, the onBlur function takes the $event object as an argument, which can be used to access the target element of the event, as well as the new value of the element. The function updates the lastValue scope variable with the new value whenever the input element loses focus. The new value is displayed in a paragraph element using data binding.

The ng-blur directive is often used in conjunction with other directives, such as ng-model or ng-change, to perform actions when an input element loses focus. For example, you might use ng-model to bind the value of an input element to a scope variable, ng-change to detect changes to the value of the input element, and ng-blur to perform some action when the input element loses focus.