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

Implementing Various Conditions in ng-if Using AngularJS

I have a scenario in my AngularJS application where I need to display different buttons based on the value of type. If type === 'await_otp', then I should display two buttons (resend OTP and cancel), if type === 'submitted', then only t ...

Step-by-step guide for embedding a Big Commerce website into an iframe

Can a website be opened inside an iframe? If not, is it possible to display a message like 'page not found' or 'this website does not allow data fetching in iframes'? <!DOCTYPE html> <html> <body> <h1>Using the ...

JavaScript API for Outlook appointment object

Is there a way to change the appointment busy status "show as" to out of office using JavaScript in an Outlook web add-in? Also, how can I alter the value of all day event to true (tick it) using JavaScript in an Outlook web add-in? Any insights would be ...

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

I need assistance with two select boxes, namely Category and Sub-category. My objective is to dynamically alter the available options in the subcategory box based upon the value selected in the category box. Additionally, I would like to load data for the ...

Retrieve Data from HTML Table using jQuery

I am working with an HTML table that has the following values: <tr class="tuker1"> <td class="tuker-lft1"> Username </td> <td class="tuker-rght1" onclick="awardRoute()"> <a href="#"> AWARD ROUTE </ ...

Encountering Issue: Exceeding the number of hooks rendered in the previous render cycle

Every time I load my Nextjs page, an error message displays: "Error: Rendered more hooks than during the previous render." I attempted to fix this by adding if (!router.isReady) return null after the useEffect code. However, this caused a problem where th ...

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

I need assistance with creating a dropdown field in Angular2. When the user selects "car", I want it to display beside the heading. Can anyone provide guidance on how to achieve this? HTML: <h1>Heading <span *ngFor= "let apps of apps">({{apps ...

Most effective method to retrieve yesterday's data

Currently, I'm working on a requirement and I need to validate the logic that I've implemented. Can someone help me with this? The task at hand is to calculate the 1 month, 3 month, and 6 month return percentages of a stock price from the curren ...

The rating system does not accurately incorporate the values provided by the API

Incorporated the star rating package into my ReactJS code to showcase the star value retrieved from a mock API. import { Rating } from "react-simple-star-rating"; However, when attempting to make it read-only, it does become static but fails to ...

Custom-designed background featuring unique styles

I have implemented the following code to create a continuous running banner: <style> #myimage { position: fixed; left: 0%; width: 100%; bottom: 0%; background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bild ...

initiating an angular application

Currently, I am in the process of initializing an angular application using code that was previously developed by someone else: window.app = angular.module('angularYoApp', ['ui.router',]); window.bootstrap = function(){ angular.bo ...

Utilizing AngularJS and PHP to Handle Image Uploads in the Backend API

Having an issue uploading an image to my PHP web-API. I can successfully upload the image using Postman by sending a POST request with the key profilePicture and a file as the value. However, when attempting to do the same upload using AngularJS, I am cons ...

Is there a way to add a price to an object in JavaScript?

Purchasedata.find(function(err, purchasedatas) { if (err) { return handleError(res, err); } var totalprice = 0; for (var i = 0; i < purchasedatas.length; i++) { findProduct(i, function(i, price) { }); } ...

In my VueJs project, I developed a custom button component that includes a loader feature. I initially passed the loader as a prop, but I am currently facing challenges integrating it with a method in another VueJs page

Here is an example of my component: <button class="BtnLoader btn btn-primary-contained btn-iconed btn-mobile btn-important" @click="onClick" :aria-label="label" :title="title"> <i v-if="loader" cla ...

Navigating routes for a module sourced from NPM: Best practices

Looking for guidance on loading Angular routes from an NPM module? Take a look at this snippet from my app.module.ts file: import { HelloWorldModule } from 'hello-world-app-npm/hello-world-app.umd.js'; // Loading module from NPM const routes = ...

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The current date picker does not meet ...

Develop a JavaScript library for use in the npm ecosystem

I have developed a minimalist JavaScript library that includes common functions: !!window.JsUtils || (window.JsUtils = {}); JsUtils = (function () { "use strict"; return { randomHex: function (len) { var maxlen = 8; ...

What exactly does a module's scope entail in browsers and Node.js environments?

Can someone clarify the scope of a module in different environments like browsers and Node? I'm particularly interested in whether a module-level variable is initialized once for the entire application or multiple times. Is each import creating a new ...

Preventing page reload in Supabase with NextJS when the website loses focus and regains it

I am working with the structure in _app.js of my Next.js app. // _app.js // import ... import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' import { SessionContextProvider } from '@supabase/auth-helpers-react' // ...

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests

I'm facing an issue with two buttons on my page: <td> <button id="1" class="green-button">Publish</button> <button id="1" class="yellow-button">Delete</button> </td> The green-button and red-button have different ...