ng-model in html input with a name of "foo[]"

Apologies for the lack of a more specific title. In HTML, when we need multiple values for a given name, we utilize the name="foo[]" attribute.

Upon posting the data, it arrives as an array. I am seeking this same functionality with ng-model in Angular.

Explanation: My form contains several fields with identical names, similar to how past experiences are written in a CV.

Note: Please ensure you read this thoroughly before dismissing it as a duplicate. I have witnessed legitimate questions being flagged incorrectly as duplicates and unhelpful.

javascriptangularjs

Answer №1

If you have the following code in your Angular controller:

$scope.foo = []; //your values in the array

You can display the values in your view like this:

<dd ng-repeat="item in foo">
    <input type="text" ng-model="foo[$index]" value="{{item}}" required/>
</dd>

Is this what you are looking for? Using ng-model eliminates the need for a name attribute, as the data will be stored in the model when the form is submitted.

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

The initial dispatch of a React hook triggers subsequent dispatches to fire multiple times

Whenever I include more than one dispatch in useEffect(), it causes all subsequent actions to be triggered twice. Please see the example below. Below is the complete code. Feel free to remove comments in any order you prefer. PS: I am not sure how to mak ...

javascriptreactjsreact-hooks

What is the best way to display an HTML file in Express when utilizing React as the frontend?

As a newcomer to the world of web development, I'm facing a seemingly simple issue that is consuming much of my time. I have set up an express server to run React on the front end. To achieve this, I use webpack and bundle to parse my react app, and ...

javascriptgetreact-routerrenderexpress-router

Live AJAX inquiries in progress

Is there a way to track the number of active AJAX requests in jQuery, Mootools, or another library similar to Prototype's Ajax.activeRequestCount? I am looking for a method that can be used across different libraries or directly through XMLHttpRequest ...

javascriptjqueryajaxmootoolsprototypejs

How can you retrieve the preceding sibling using an Angular directive?

Currently, I am utilizing ELEMENTREF to interact with the DOM via Renderer2. Allow me to provide a simple example: import { Directive, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export c ...

javascriptangulartypescriptangularjs-directivefrontend

Trouble with Bootstrap popover functionality

Twitter bootstrap-2.3.2 popover is being utilized in my BackboneJs project. When I click, a function is triggered to open the popover: <li> <a class="candidPopover" href="#" id="loginUser" rel="popover"><%= candidateName %></a> & ...

javascriptjquerytwitter-bootstrapbackbone.js

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

https://i.stack.imgur.com/PpFlB.pngI currently have multiple Arrays containing various inputs this.listNumber = [ { "GenericQuestions": [ { "input": "long", }, { "input": & ...

javascriptangularjstypescript

What is the best way to eliminate HTML <li> bullets using codebehind?

When working in codebehind, I often create an HTML list using the following method: HtmlGenericControl list = new HtmlGenericControl("ul"); for (int i = 0; i < 10; i++) { HtmlGenericControl listItem = new HtmlGenericControl("li"); Label textLabel ...

javascriptcsshtml-listscode-behind

Concealing URL parameters in ui-sref (using ui.router)

Here is the HTML code I am working with: <a ui-sref="videoParent.Display.video({videoName:'[[sVid.slug]]', videoId:'[[sVid.videoID]]'})"><p>[[sVid.name]]</p></a> The parameters videoName and videoId are retriev ...

javascriptangularjsangular-ui-router

A JavaScript async function with a nested call inside

Below is my node function for the API server: router.post('/find', async (req, res) => { try { const firewalls = []; let count = 0; const devices = await Device.find({ ...req.body }); devices.forEach(async (item) => { ...

javascriptnode.jsexpressasync-await

Understanding the process of verifying signatures with Cloud KMS

I've been struggling to confirm the validity of a signature generated using Google's cloud KMS, as I'm consistently receiving invalid responses. Here's my approach to testing it: const versionName = client.cryptoKeyVersionPath( p ...

javascriptdigital-signaturesha256node-cryptogoogle-cloud-kms

Running a Chrome content script once an AJAX request has been triggered by the <body> element

I am facing a challenge with running the content script before the DOM is fully loaded. To give context, there is an AJAX request within a tag which gets triggered on $(document).ready(). Once this request is completed, my extension code kicks in. To tra ...

javascriptjqueryajaxhtmlgoogle-chrome-extension

Guide on using react-highlight-words to emphasize various keywords using different color schemes

I am currently working on implementing a search feature for my React project. At the moment, I am only required to enter a single keyword and search for it within the text. Once found, I need to extract and display the sentences containing this keyword sep ...

javascriptreactjsfull-text-searchhighlight

"What exactly does {...props} refer to and what is the best way to obtain my function from another

Currently, I am focusing on learning react native with a specific interest in react navigation v5. As mentioned in this resource: https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components, my goal is to implement a dark mode ...

javascriptandroidreactjsreact-nativeexpo

Is there a way to identify the duplicated input element values using jquery?

Just starting out in the world of web development and jQuery. I have an input element that has been bound with a blur event. Here's the code snippet: // Here are my input elements: <input class="input_name" value="bert" /> <input class="inp ...

javascriptjquery

How to decode JSON data into a JavaScript array and retrieve specific values using index positioning

Upon receiving a json response via ajax, the code looks like this: echo json_encode($data); The corresponding ajax code is shown below: $.ajax({ url:"PaymentSlip/check", data:{val:val}, type: 'POST', succe ...

javascriptjqueryjsonajax-request

What can I do to comprehend and diagnose the error that is appearing in my reactjs code?

Working on a React project, I came across an error in the Google Chrome console. Uncaught true https://i.stack.imgur.com/dL8jW.png https://i.stack.imgur.com/kXn9m.png https://i.stack.imgur.com/UMQbh.png The throw true appears to be causing this uncau ...

javascriptreactjsdebuggingcookies

Tips for efficiently updating numerous words in text on a webpage powered by AJAX, as well as in select attributes, by implementing a Tampermonkey script

My approach involves translating specific text, words, and terms within an HTML document using a tree walker to target only text nodes: var replaceArry = [ [/View your user account/gi, 'Tu cuenta'], // etc. ]; var numTerms = replac ...

javascriptajaxgreasemonkeyuserscriptstampermonkey

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...

javascriptjqueryhtml

Automatically executing JavaScript function on an AngularJS webpage

Within my AngularJS webpage, I have implemented a self-invoking function. One crucial aspect of this function is the getData() method, responsible for making Ajax calls to fetch data upon page load and user interactions. <script type="text/javascript"& ...

javascriptangularjs

What is the best way to convert my JSON data to HTML using JavaScript?

My dilemma seems to be rooted in the use of backticks. Strangely, an error keeps popping up whenever I try to employ them in my IDE (Brackets). I attempted solutions by testing directly in my Browser and through NotePad++, but unfortunately, nothing seeme ...

javascripthtmljson