What is the best way to pass multiple row values in a form field using AngularJS to a web API?

Is it possible to insert multiple row values in an AngularJS controller using a web api?

<tr ng-repeat="rt in xxtt">

      <td>
    <input type="text" class="form-control" ng-model="rt.name" required />
     </td>
    <td>
     <input type="text" class="form-control" ng-model="rt.email" required />
     </td>
    </tr>
    <button class="btn" ng-click="btnSave()">
    Save
    </button>

$scope.newarray=[];
params = {
            "id": $scope.id

            "nameList": [
                    {
                        "name": $scope.name

                    }
            ]
        }     
angular.forEach($scope.nameList, function (response) {
                    $scope.newarray.push({ name: response.name });
                });
params = JSON.stringify(params);        
        alert(params);
        LoadSvc.LoadData(params).then(function (response) {  
}   

Is there a way to add multiple rows of values simultaneously? What is the best method for sending a list of array values from AngularJS to a web api?

Answer №1

If your HTML is invalid, it could be the reason why ng-repeat isn't working as expected. Make sure to enclose <tr></tr> within <table></table>. To send data to a server using a web API, utilize the $http service. Specifically, for creating something new, consider using the POST method.

For detailed information, refer to the $http service documentation.

In conclusion, ensure that your btnSave() function performs this operation and utilizes the $http service.

Your final code may resemble the following:

Template

<div ng-app="app" ng-controller="AppController">
  <table>
    <tr ng-repeat="rt in xxtt">
      <td>
        <input type="text" class="form-control" ng-model="rt.name" required />
      </td>
      <td>
        <input type="text" class="form-control" ng-model="rt.email" required />
      </td>
    </tr>
  </table>
  <button class="btn" ng-click="btnSave()">
    Save
  </button>
</div>

Controller

 $scope.btnSave = function() {

            /** Enter your endpoint here **/
      $http.post('some-endpoint.com', $scope.xxtt).then(function(response) {
                    alert("Data posted successfully");
            },function() {
          alert("Failed to post data");
      });

  }

Here's a live sample of your code.

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

Guide to setting up page.js

I am eager to incorporate page.js into my project. However, it seems like it requires some type of build system, so I'm not able to locate a single page.js file to include in my page and immediately begin using. page('/',index) Does anyone ...

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

Creating dynamic forms in Angular with partial dynamicity

I'm working on streamlining the process of creating forms using AngularJS. My end goal is to be able to simply write something like: <form> <field-div label="Name"> <field which="form.name"></field> </field-div> ...

Troubleshooting AngularJS: json_encode not producing output under specific circumstances

Currently, I am using $http.get to retrieve data from the server. The controller first calls BackendServices, and within the service, $http.get is invoked: Controller: app.controller('courseController', ['$scope', 'BackendService ...

What is the process for uploading an image and entering text into the same row in Google Sheets?

Hello, I am currently working on a Google Script web app that enables users to upload 10 photos along with comments for each photo. This information will then be inserted into a Google Sheet when the user clicks the 'upload' button on the web app ...

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Is there a way to make my v-simple table with v-chips and v-badges align correctly in two or three column peer cell format? Here is the table for reference: Currently, I only have scoped styling applied: <style scoped> .time-slot-x-small { border- ...

The Add/Remove button functionality is not functioning as expected for duplicated form fields when using jQuery

I am experiencing an issue with the functionality of the "Add another" and "Remove row" buttons in my form. I implemented code from a specific Stack Overflow answer (jquery clone form fields and increment id) to create a cloneable section, but only the ori ...

How to Store and Retrieve User-specific Data using Express and Mongoose?

Currently, I am developing a small single-page application that allows users to login using PassportJs and Mongoose. One of the main features I am working on is enabling users to log in and have a unique todo/task list associated with each user. I succes ...

How can we bring in prop array values in React?

I've been working on developing a small music player program in React. Is there a way to import all these values together with a single import statement? I noticed that manually inputting the values into the props array doesn't work because the ...

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

AngularJS provides a convenient way to manage content strings

As I embark on developing a large AngularJS application, I am faced with the need to manage UI text content. This is crucial as elements like contextual help will require post-launch editing by the client in response to user feedback. I am currently explo ...

Node.js application encounters a challenge with Swagger UI requirement not being met

My Node.js application utilizes Electron v15.3.1 and includes a Swagger UI for OAS file viewing, specifically version 4.6.1. Due to a security vulnerability in the Swagger UI, I need to upgrade it. Initially, I attempted to resolve the issue by running np ...

Creating a tree array in JavaScript from JSON data

I have been struggling to create a tree array from the given JSON data. I have attempted to use filter, map, and reduce methods, but haven't been successful in achieving the desired result. [{ "code": "2", "name": "PENDING" },{ "code": "2.2", ...

Troubleshooting a Vue 2 component's prop receiving an incorrect value

I'm currently working on creating a menu that navigates between categories. When a category has a sub-category, it should return a boolean value indicating whether it has a sub-category or not. <template> <select><slot></slot ...

When a specific condition is met, Jquery can automatically execute a function contained

I am trying to slowly reveal the h1 tag using jQuery for demonstration purposes. The scroll function is working when I manually click to initiate it, but I am having trouble triggering it automatically. I feel like I might be missing something simple and ...

I'm curious about the outcomes of the JavaScript test. Could someone provide an explanation

Recently, I was in the process of writing a blog post discussing the importance of checking for the existence of jQuery elements before attaching event handlers. To illustrate this, I quickly created a jsfiddle example here. What puzzles me is that the re ...

Ways to troubleshoot NPM installation issues related to gyp ERR

I have tried most of the suggestions found online, but I am still encountering an error when trying to install opencv and serialport. My current setup includes Visual Studio 2019 with C++ Desktop environment and Python 3.7. npm ERR! command C:\Windows ...

Adjusting the view to focus solely on the visible portion of the webpage

Is there a way to achieve zooming in and out on a website similar to how it works on the site ? I want only the visible area to zoom in or out when users interact with their browser. I searched online for a solution but couldn't find one. Any suggesti ...

What is the process for signing out of Facebook within a Cordova Ionic app?

I followed the tutorial located at https://github.com/nraboy/ng-cordova-facebook-example but it does not include a function for logging out. I tried to implement the logout function by adding the following code: facebookExample.controller("LogoutControlle ...

Discover the security vulnerabilities in Node.js when using VS Code with FREECODECAMP's React app

As a beginner in using VS code, I attempted to work on a project for FREECODECAMP. This project involved creating a random quote machine, marking my first time coding a react project. While following a YouTube tutorial and making progress towards functiona ...