Using Angular's ngBlur directive on multiple input fields

Question

Using Angular's ngBlur directive on multiple input fields

My current task involves capturing and saving all content on a webpage after it has been edited. For example, when a user clicks into an input field, enters data, and then clicks elsewhere, I would like to trigger a function to collect all the model data and store it in the browser's local storage.

<input ng-blur="functionName()" />

The traditional approach works well for single inputs, but what if there are multiple inputs:

<input ng-blur="functionName()" />
<input ng-blur="functionName()" />
<input ng-blur="functionName()" />
<input ng-blur="functionName()" />

Is there a way to apply the ng-blur effect to all inputs on a page without individually adding the ng-blur attribute to each one?

javascript angularjs

Answer 1

Answer №1

If you want a custom directive that can handle this task, consider the following solution which was inspired by a response to a similar query:

AngularJS 1.3 - Implementing `ng-change`-like feature for the entire form

While this code hasn't been tested yet, it should provide you with a good starting point:

.directive('inputsOnBlur', ['$parse', function($parse){
  return {
    link: function(scope, element, attrs){
       var cb = $parse(attrs.inputsOnBlur);
       element.find('input').on('blur', function(){
          cb(scope);
       });
    }
  }
}]);

To utilize this directive, follow the below example:

<form inputs-on-blur="doSomething()">
   <input />
   <input />
   <input />
</form>

Answer 2

If you want a custom directive that can handle this task, consider the following solution which was inspired by a response to a similar query:

AngularJS 1.3 - Implementing `ng-change`-like feature for the entire form

While this code hasn't been tested yet, it should provide you with a good starting point:

.directive('inputsOnBlur', ['$parse', function($parse){
  return {
    link: function(scope, element, attrs){
       var cb = $parse(attrs.inputsOnBlur);
       element.find('input').on('blur', function(){
          cb(scope);
       });
    }
  }
}]);

To utilize this directive, follow the below example:

<form inputs-on-blur="doSomething()">
   <input />
   <input />
   <input />
</form>

Answer 3

Answer №2

Absolutely, it's totally doable. You just have to dynamically include data-ng-blur in the input tag. Here is an example of the code you can use in your controller:


    var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
    inputs.forEach(function (input) {
        input.setAttribute('data-ng-blur', 'functionName()');
        $compile(angular.element(input))($scope);
    });

Answer 4

Absolutely, it's totally doable. You just have to dynamically include data-ng-blur in the input tag. Here is an example of the code you can use in your controller:


    var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
    inputs.forEach(function (input) {
        input.setAttribute('data-ng-blur', 'functionName()');
        $compile(angular.element(input))($scope);
    });

Using Angular's ngBlur directive on multiple input fields

Answer №1

Answer №2

Similar questions

Perform the same actions on every element within the ul li

Discovering and revising an item, delivering the complete object, in a recursive manner

Stop any accidental double clicks on the <input type="submit" /> to avoid duplicate entries

Hide the menu when a user taps on an item on mobile or tablet devices

The counterpart of the RxJS setTimeout operator

What are the best ways to handle processing of incorrect input?

When running npm install, the dist folder is not automatically generated

utilize dynamic variable within the template's views

My attempt at creating a straightforward sorting function turned out to be ineffective

Implementing Material UI datetime-local feature with no minute selection

What is the best way to implement my custom toolbar button to utilize the form's validation function within react-admin?

Steps to remove information from a database using PHP, AJAX, and vanilla JavaScript (without jQuery)

Having trouble importing a file in TypeScript?

Creating a gradual appearance effect through ng-repeat when adding elements to the beginning of a list

Is there a way for me to dynamically decide whether to use the append or prepend function?

The rule 'import/no-cycle' definition could not be located

Steps to create a continuous blinking/flickering effect on a highchart pathfill

Incorporate JSON data using jQuery's AJAX in MVC3

AngularJS is throwing an error because the current.$$route object is not defined

What is the reason for the malfunction in the login dialog?