How to retrieve values from dynamically generated text boxes using ng-repeat in AngularJS

When using ng-repeat, I am able to display textboxes related to each item. Upon clicking the SaveAll button, I intend to retrieve all textbox values based on ITEM ID and save them to the database.

<tr>
  <td>
     <table ng-repeat="item in itemDtls">
        <tr>
            <td>
                <label for="lblItemName">Item ID: </label> {{item.ITEM_ID}} 
             </td>
        </tr>
        <tr>
             <td>
                <label for="lblPriority">Item Priority </label>
                <input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
              </td>
        </tr>
         <tr>
            <td>
               <label for="lblComment">Comment</label>
                <input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
             </td>
          </tr>
      <tr>
  </table>
</td>

    <tr>
      <td>
         <button type="submit" ng-click="SaveAll()">SaveAll</button>
      </td>
   </tr>

Answer №1

Instead of using the "value" tag, make sure to use "ng-model" only. Eg:

            <td>
           <label for="lblComment">Comment</label>
            <input type="text" id="inpComment" ng-model="item.COMMENT" />
         </td>
  • Any changes made to comments will automatically update in that variable.
  • Later you can send the "itemDtls" to the backend to store in the database.
  • A backend is required to store data in the database.

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

What is the process for storing a list group in an SQL database?

Having a code snippet in html which populates a list with data selected from a combo box upon clicking the 'add' button. However, running into an issue where "undefined index: subjectlist" error occurs when submitting the form. Seeking advice on ...

How can you integrate Dygraph into your React project alongside redux?

Lately, I've been facing some challenges while trying to integrate Dygraph into React (utilizing Redux). The Dygraph wrapper packages available on NPM don't seem to cooperate. Furthermore, the conventional method of using: <div id="graph"> ...

The function in which the "useStyles" React Hook is invoked is not a valid React function component or a defined custom React Hook function

After integrating Material UI with React, I encountered the following error message: React Hook "useStyles" is called in function "appBar" which is neither a React function component nor a custom React Hook function I have carefully checked the rules of ...

Using JavaScript to transfer the data ID from a button to a form

I am working on a project where I have a button that triggers a modal: <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="# ...

I encountered a Node.js 203 error specifically on my computer - could this be linked to a specific environment and is there a way to resolve it

Let me explain what happened: I was working on a Nodejs-express-angular example by Brian Ford the other day, and everything was running smoothly. update:----------------this part of problem has been solved---------- However, after a few hours (during wh ...

Generate an array containing the IDs of the chosen objects

Suppose I have an array like this: var aaa = [ {"id": 1, "text": "Ann"}, {"id": 2, "text": "Bob"}, {"id": 3, "text": "Carol"}, {"id": 4, "text& ...

Possible rephrased version: "Strategies to halt the playback of a screencast.com video that is

I recently uploaded a screencast video to my website and now I'm looking for a way to pause the video when I click on a button. I attempted using some JavaScript code with an onclick event attached to the button. var myVideoPlayer = document.getEleme ...

Exploring more effective methods for iterating and showcasing individual elements sequentially with AngularJS

I am currently in the process of developing an application that involves incorporating animations, and I am seeking to enhance its performance. My goal is to navigate through a sequence of divs at specific time intervals while displaying one at a time. Add ...

What is the best way to combine the elements within an array with the elements outside of the array in order to calculate their sum?

The goal is to create a function that determines the winner using two input integers. The function should return the first input if it is greater than the second input. function determineWinner(a, b) { let result = [] for (let i = 0; i < 3; i++) ...

Streamline repetitive scope attributes in AngularJS

After noticing that I was using a repetitive structure, I want to simplify it: <container> <clock property="data"></clock> <calendar property="data"></calendar> <alert property="data"></alert> </container ...

Evaluating an AngularJS application using Selenium

Exploring the functionalities of an AngularJS application Discover more about Angular JS App Encountered an error while clicking on the UI Kit link on the website - Error at demoaj.Ajapp.main(Ajapp.java:16) Caused by: org.openqa.selenium.NoSuchEleme ...

Axios is returning a 401 (Unauthorized) error when attempting to retrieve user data from a React frontend and pass it to DRF Social Oauth2. Strangely, the same process

Here are the contents of two files, LoginScreen.JS and login.JS. The LoginScreen.JS file contains a submit handler that submits user input, while we import the axios instance from login.JS. In addition, a working example from PostMan has been provided. lo ...

Press the "Reveal More" button to expand the content to its full size

I am currently working on coding a "read more" section using a button. I have looked at some existing solutions, but none of them are to my liking. My plan is to create a div that includes all the relevant content. My goal is to have a div at the bottom w ...

Problem with exporting default class in Babel/Jest conflict

Currently, I am facing a challenge while testing the code using jest. The issue seems to be related to babel, especially regarding the export of a default class. Here is an example of the code causing the problem... export default class Test { get() { ...

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

I'm trying to transfer all the nodes of a child node to the parent using the spread operator or Object.assign (without relying on Lodash) while avoiding overwriting existing properties. My initial thought was to simply append the childArray to the ro ...

Creating a dataset for D3 in JavaScript: A step-by-step guide

I am attempting to construct a graph similar to this: https://i.sstatic.net/USdyj.png. The graph represents a dependencies tree where each node has a list of elements it depends on as children (in a list), or a simple JSON structure with name and size info ...

With TypeScript, you have the flexibility to specify any data type in the generic types when using the axios.get method

axios.get('/api') When working with TypeScript as shown above, it is important to designate types for better clarity. This allows us to reference the type definition of axios, like so: (method) AxiosInstance.get<any, AxiosResponse<any> ...

Jest: Issue with spyOn test failing despite async function being executed

Having trouble setting up a spyOn for an async function within a submodule. This issue is throwing me off because I've successfully implemented similar tests in the past. Here's an overview of the code: In routes.js: const express = require(&apo ...

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: with this new link: without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restriction of needing at least 10 reputation points in order to post more t ...

What can be done to ensure that two separate react-native Picker components do not interfere with each other's

Encountering an issue with two Pickers in a react-native View. Whenever I select a value in one Picker, it causes the other Picker to revert back to its initial item in the list. It seems like the onValueChange function is being triggered for both Pickers ...