Loop through object properties using ng-repeat but remove focus from input box after typing

Question

Loop through object properties using ng-repeat but remove focus from input box after typing

I have been utilizing ng-repeat to connect form elements to the attributes of a custom object I've created. Here's an example:

 $scope.myObject = {
            'font-size': 10,
            'text-outline-width': 2,
            'border-color': 'black',
            'border-width': 3,
            'background-color': 'white',
            'color': '#fff'
    }

HTML:

<div ng-repeat='(key, prop) in myObject'>
    <p>{{key}} : {{prop}}</p>
    <input type='text' ng-model='myObject[key]'>
</div>

However, each time I attempt to input a value into the text box, it gets deselected and I must click on it again to continue typing.

Is there an alternative method for achieving this two-way binding with an object that allows for seamless typing?

Check out the JSFiddle here: http://jsfiddle.net/AQCdv/1/

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Angular caused the inputs to lose focus due to its constant rebuilding of the DOM with every change in myObject. To prevent this issue, you can specify ng-repeat to track by key. Additionally, make sure you are using version 1.1.5 or newer of the Angular library:

function MyCtrl($scope) {
  $scope.myObject = {
    'font-size': 10,
    'text-outline-width': 2,
    'border-color': 'black',
    'border-width': 3,
    'background-color': 'white',
    'color': '#fff'
  }
}

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
  <div ng-repeat='(key, prop) in myObject track by key'>
    <p>{{key}} : {{prop}}</p>
    <input type='text' ng-model='myObject[key]'>
  </div>
</div>

Check out the updated fiddle here.

Answer 2

Angular caused the inputs to lose focus due to its constant rebuilding of the DOM with every change in myObject. To prevent this issue, you can specify ng-repeat to track by key. Additionally, make sure you are using version 1.1.5 or newer of the Angular library:

function MyCtrl($scope) {
  $scope.myObject = {
    'font-size': 10,
    'text-outline-width': 2,
    'border-color': 'black',
    'border-width': 3,
    'background-color': 'white',
    'color': '#fff'
  }
}

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
  <div ng-repeat='(key, prop) in myObject track by key'>
    <p>{{key}} : {{prop}}</p>
    <input type='text' ng-model='myObject[key]'>
  </div>
</div>

Check out the updated fiddle here.

Answer 3

Answer №2

One effective solution is to utilize a directive. A custom directive was developed under the name customBlur, although you have the flexibility to rename it as needed, ensuring consistency in your HTML structure. For reference, please check out this jsfiddle: http://jsfiddle.net/AQCdv/3/

angular.module('app', []).directive('customBlur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return; //exclude radio buttons and checkboxes

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });
            });
        }
    };
});

To implement the directive in HTML:

<input type='text' ng-model='myObject[key] ' custom-blur>

This directive effectively removes the events responsible for updating the model, thereby preventing the text field from losing focus. Consequently, when the text field loses focus (triggering the blur event), the models are updated accordingly.

Answer 4

One effective solution is to utilize a directive. A custom directive was developed under the name customBlur, although you have the flexibility to rename it as needed, ensuring consistency in your HTML structure. For reference, please check out this jsfiddle: http://jsfiddle.net/AQCdv/3/

angular.module('app', []).directive('customBlur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return; //exclude radio buttons and checkboxes

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });
            });
        }
    };
});

To implement the directive in HTML:

<input type='text' ng-model='myObject[key] ' custom-blur>

This directive effectively removes the events responsible for updating the model, thereby preventing the text field from losing focus. Consequently, when the text field loses focus (triggering the blur event), the models are updated accordingly.

Loop through object properties using ng-repeat but remove focus from input box after typing

Answer №1

Answer №2

Similar questions

Troubleshooting Angular 2: Instances of Classes Not Being Updated When Retrieving Parameters

Populate data in a third-party iframe using a Chrome Extension

Implementing a feature to close the drawer component from the main page by clicking on the menu button in React-js

What is the best way to include a file attachment using a relative path in Nodemailer?

Display the output from a JavaScript code snippet on the console

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

Removing a specific item from an array

When I tap on it, the box should shift its position

Delays can occur in CSS when transitioning an element's visibility from `visible` to `hidden`

Retrieving individual data elements from an array with the help of the .find() method

Lagging speeds in client-side template rendering using Rivets.js

IE11 not processing jQuery ajax response correctly

Angular 6 data modification update: What you need to know

Guide on eliminating commas by utilizing the replace function in Angular

Execute jQuery code only when a child element within the parent container is clicked

Guide to retriecing a state in Next.js 14

The jsonGenerator is unable to process strings containing spaces

Tips for creating a see-through scrollbar in React?

Having difficulty retrieving information from the interactive spreadsheet

Organize Your Data in AngularJS After Completing Calculations in the View