Click twice on the editable AngularJS table to wrap each item

As a new learner of Angularjs, I found an existing code example and decided to customize it. My goal was to enable double-click editing for each li item. However, after adding one more li, the functionality did not work as expected.

<li ng-dblclick="startEditing(item);">
          <span ng-hide="item.editing">{{item.name}}</span>
          <form ng-submit="doneEditing(item)" ng-show="item.editing">
              <input ng-model="item.name" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
          </form>
      </li>

         <li ng-dblclick="startEditing(item);">
          <span ng-hide="item.editing">{{item.thing}}</span>
          <form ng-submit="doneEditing(item)" ng-show="item.editing">
              <input ng-model="item.ting" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
          </form>
      </li>

I am contemplating whether using startEditing(item.name); would be a more effective way to target each individual li.

http://jsfiddle.net/d9d3hsku/

Is there a simpler method to make the field editable without having to repeatedly paste and modify the following piece of code?

<form ng-submit="doneEditing(item)" ng-show="item.editing">
              <input ng-model="item.name" ng-blur="doneEditing(item)" ng-focus="item == editedItem">
</form>

Answer №1

If you're looking for a solution, consider checking out this specific directive as it could prove to be beneficial.

Answer №2

UPDATE:

ng-focus gets activated whenever there is a double click on the input field. This behavior is due to the following line of code:

ng-focus="item == editedItem"

Consequently, ng-blur is automatically triggered on another input field! Removing this line will resolve the issue:

      <li ng-dblclick="startEditing(item);">
          <span ng-hide="item.editing">{{item.name}}</span>
          <form ng-submit="doneEditing(item)" ng-show="item.editing">
              <input ng-model="item.name" ng-blur="doneEditing(item)">
          </form>
      </li>

         <li ng-dblclick="startEditing(item);">
          <span ng-hide="item.editing">{{item.thing}}</span>
          <form ng-submit="doneEditing(item)" ng-show="item.editing">
              <input ng-model="item.thing" ng-blur="doneEditing(item)" >
          </form>
      </li>

Check out this Jsfiddle link for more details!

You may also consider utilizing angular-xeditable as recommended by @Rishab777.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching from map view to satellite view on Google Maps allows you to see detailed aerial

Is there a way to switch from map view to satellite view on a Google Map using JavaScript after zooming in 100%? If so, how can it be achieved within the following JavaScript code? DEMO:http://jsfiddle.net/keL4L2h0/ // Load Google Map ///////////////// ...

AngularJS is unable to locate the $locationProvider module

I'm encountering an error message every time I attempt to utilize $locationProvider. Is there a specific way I should be importing the module? Error: $injector:unpr Unknown Provider Unknown provider: $locationProviderProvider <- $locationProvider ...

Ways to retrieve a designated object linked to a specific value within a JavaScript structure

I am facing a challenge where I need to set a javascript property object with values from another property object within the same instance. Currently, I have the following object: var PLAYER = { slides: { { slide_id: 60, slide_content: 'c ...

Is there a unique identifier associated with web explorers?

I'm conducting an experiment and I've noticed that Google is able to detect that it's the same computer, even when I change various settings. It seems to be identifying the explorer with a unique ID or something similar. I have tried everyth ...

Alter the navigation background when moving between sections on a one-page website

I need to ensure that the background of the navigation remains transparent on the "home" section. However, when switching to other sections, the background color of the navigation becomes permanently black. <header class="clearfix"> <nav> ...

Issues concerning date and time manipulation - Library Moment.js

As a beginner in JavaScript, I've been working on an activity that generates a table of train times based on user input. However, I'm facing issues with formatting the arrival time correctly. Whenever I input the arrival time in military format ( ...

Guide for accessing Javascript documentation via console?

There are many times when I am coding in Python, that I find myself wanting to quickly access the documentation for a function. In the iPython console, I can easily do this by entering dir?? which retrieves the documentation for the dir function. Is ther ...

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

Leveraging dynamic visuals for your Twitter metadata image

My Twitter application automatically posts the current title being broadcast on my web radio every 20 minutes. It includes details like the artist, number of listeners, and playlist, but does not display album covers. To work around this limitation, I am ...

What are the issues surrounding Node.js when it comes to handling Cyrillic encoding?

If we consider the most basic and simplest example from the Node website: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hell ...

Transferring a uint8clampedarray Array to C# using JavaScript via ajax after extracting getImageData from the Canvas

Currently, I am facing an issue while attempting to create a signature using client-side javaScript and then forwarding the result to the back-end (c#) via ajax. The array I am trying to transmit is of the type uint8clampedarray, but unfortunately, the Set ...

Intermittent Cloudfront Content Delivery Network (CDN) disruptions (monitoring) - Implementing CDN Fail

Over the past two months, I've been dealing with sporadic issues involving Amazon Cloudfront. These failures occur 2-3 times a week, where the page will load from my web server but assets from the CDN linger in pending status for minutes at a time. It ...

Choosing between radio buttons either horizontally or vertically within a table

Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...

Incorporating a switch button for toggling functionality in a Rails application

I attempted to convert a select tag into a JavaScript toggle on/off switch within my Rails application. After some searching, I came across a straightforward solution on the W3Schools website. http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryj ...

What steps are needed to pass an additional parameter to the onMouseDown function in ReactJS?

The TypeScript function listed below demonstrates the functionality: const handleMouseDownHome = (e: any) => { // Only activates when scroll mouse button is clicked if (e.button === 1) { window.open("/", "_blank", " ...

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

Ensure all fields are valid prior to performing an update

I'm currently faced with the challenge of validating my form data before executing an AJAX update. Essentially, what I want to achieve is to validate the input data in the form before triggering the ajax update function. I'm unsure about where to ...

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

I am facing an issue where the Thymeleaf rendered HTML code is not being displayed by the Browser when I try to insert it using JavaScript. $('<span [[$ th:text#{some.property.key}]] id="counter" class="UI-modern"> </ ...

What are the steps to generate an npm package along with definition files?

Is it possible to create an NPM package with definition files containing only interfaces declared in *.ts files? Consider a scenario where we have two interfaces and one class definition: export interface A { id: number; } export interface B { name: s ...

exploring the depths of nested objects and utilizing the 'for in

My issue involves receiving a json response from an API that includes objects within objects. It looks something like this: {Object}->{results}->{manyObjects} When I execute the following code: var list = data.results.list; for(val in list){ ...