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?

javascriptangularjsasp.net-web-api2

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

Retrieve the native interface from the Puppeteer browser/page context

Can a native interface be obtained from the Browser or Page instance to verify if an object is an instanceof this interface? For example, in a testing scenario with jest (where CanvasRenderingContext2D is not available due to being a Node context rather t ...

javascriptjestjspuppeteer

Is it possible to access the scope when the Angular-UI-Router is exited?

I'm searching for a potential solution: $stateProvider.state('user', angularAMD.route({ url: '/user/:id', templateUrl: 'views/user.html', controllerUrl: 'views/user', controller: ...

angularjsangular-ui-routerstateexitenter

What causes the closure variable to be reset after iterating over JSON data using $.each method?

Take a look at this scenario: var elements = []; $.getJSON(data_url, function(result) { $.each(result, function(key, value) { elements.push(parser.read(value.data)); // at this point, "elements" contains items }); }); dataLayer.addElements( ...

javascriptjqueryjsonclosures

Nuxt-Gmap displaying multiple infowindows

Does anyone know how to close an info window if a user clicks on another marker? In the Google documentation, you open infowindows manually, but in nuxt-gmap it's like this: <GMap :key="mapRender" ref= ...

javascriptvue.jsgoogle-mapsnuxt.js

What is the best way to manage the connections in my D3 tree chart?

I've been working on customizing a tool from an open source library called angular-d3-tree, but I'm struggling with getting the links to connect properly in my D3 tree structure. This is what my current tree layout looks like: https://i.stack.im ...

javascriptangulard3.js

Tips for including an external babel JS (ES6) file in an HTML document:

To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...

javascriptjqueryhtmlecmascript-6babeljs

Error in Google reCaptcha 2: "a is null" occurs when grecaptcha.reset function is executed

I am currently working on a registration page that utilizes AJAX for validation on both the client and server sides. If the server side validation fails, the AJAX function returns the errors to the screen and tries to reset the reCAPTCHA using grecaptcha. ...

javascriptjqueryajaxrecaptcha

Issue: The key length and initialization vector length are incorrect when using the AES-256-CBC encryption algorithm

Within my coding project, I have developed two essential functions that utilize the AES-256-CBC encryption and decryption algorithm: import * as crypto from "crypto"; export const encrypt = (text: string, key: string, iv: string) => { con ...

javascriptnode.jstypescriptencryption

JavaScript timekeepers and Ajax polling/scheduling

After looking into various methods like Comet and Long-Polling, I'm searching for a simpler way to push basic ajax updates to the browser. I've come across the idea of using Javascript timers to make Ajax calls at specific intervals. Is this app ...

javascriptajaxtimer

The second parameter of the Ajax request is not defined

Having an issue with my Ajax request in Vue.js where the second parameter is logging as undefined in the console. I've been trying to fix this problem but haven't found a solution yet. This is the code snippet for $.ajax(): //$.ajax() to add ag ...

javascriptjqueryajaxvue.js

Is there a way to modify an npm command script while it is running?

Within my package.json file, I currently have the following script: "scripts": { "test": "react-scripts test --watchAll=false" }, I am looking to modify this script command dynamically so it becomes: "test&qu ...

javascriptnpmnpm-scripts

Tips for showcasing a personalized design using ng-repeat

Upon reflection, I realized that my original question needed improvement, so here is the revised version. Hello! I am new to Angular and I am attempting to create a custom layout for my data list using ng-repeat. I want to display different model values w ...

angularjsangularjs-directiveangularjs-ng-repeat

Are there alternative methods, aside from using a computed property, that can be utilized to store a Vue route parameter in a way where

In my Vue component, I am working on passing a route parameter through XHR requests and potentially using it in other areas as well. Initially, I considered storing it as a data attribute but realized that it could be modified by someone. Then it occurred ...

javascriptvue.jsvuejs2vue-componentvue-router

Attempting to save data to an external JSON file by utilizing fs and express libraries

I've encountered a challenge while attempting to serialize an object into JSON. Despite my best efforts, I keep encountering an error that has proven to be quite stubborn... Below is the code snippet that's causing the issue: APP.post('/api ...

javascriptnode.jsjsonexpressnode.js-fs

React application not displaying element properly?

I am facing an issue with my react modal that displays a sign-in and sign-up form. The problem arises when I try to access the button on the form using its id, which is modal-sign-in-submit-button. document.getElementById('modal-sign-in-submit-button ...

javascriptnode.jsreactjs

Error found in Nuxt3 application when using locomotive scroll functionality

I'm working on a Nuxt3 project with Locomotive Scroll and GSAP (repository link: https://github.com/cyprianwaclaw/Skandynawia-Przystan). I'm facing an issue where, when I change the page from index to test and then revert back, the page doesn&apo ...

javascripttypescriptvue.jsnuxt.jslocomotive-scroll

What is the process for executing mocha tests within a web browser?

Am I the only one who thinks that their documentation lacks proper instructions on running tests in the browser? Do I really need to create the HTML file they mention in the example? How can I ensure that it runs the specific test cases for my project? I ...

javascriptreactjsmocha.js

AngularJS is behaving in a way that requests fresh JSON data only during the initial loading

I'm currently utilizing AngularJS to incorporate an app into a native iOS application, but I'm encountering difficulties with loading dynamic data. I have configured the controllers to retrieve JSON data from the iOS app via http queries for eac ...

jsonangularjs

Using jQuery to trigger alert only once variable has been updated

I have a question that may seem too basic, but I can't find the solution. How do I make sure that the variables are updated before triggering the alert? I've heard about using callbacks, but in this case, there are two functions and I'm not ...

javascriptjquery

The variable is unable to be accessed within the PHP function query

After passing a variable through ajax to a function within my php file "Cart_code.php", I encountered an issue where the variable was not accessible inside the function. Can you help me figure out why? Javascript $.ajax({ type: "POST", url: "incl ...

javascriptphpoop