Creating Angular Forms with dynamic input names - a step-by-step guide!

JSFiddle: http://jsfiddle.net/L8m7ptm7/

I am working with an array of objects that hold questions to be incorporated into an Angular form:


$scope.questions = [
    {
        'name': 'question1',
        'label': 'Question 1',
        'value': null
    },
    {
        'name': 'question2',
        'label': 'Question 2',
        'value': null
    }
];

The questions display correctly in the DOM, with the expected `name` attributes as 'question1' and 'question2'.

The issue arises when trying to extract these field values from the `myForm` object. If you run the fiddle, you'll notice what happens. Rather than the form having keys for `question1` and `question2`, it only has a single key - `{{question.name}}`.

Is there a way to make these fields register with the form object using the intended (rendered) names?

Answer №1

My previous version was Angular 1.2, but after upgrading to Angular 1.3.6, I finally achieved the results I wanted.

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

How can I connect a jQuery slider to dynamically update a div's content?

I am trying to update the content of a Message div based on the position of my slider. Since my slider only has 5 positions, I need to display 5 different messages depending on which position is selected. Does anyone know how to accomplish this? Here is t ...

Struggling with retrieving information from a basic JSON file using React

I am facing an issue where I need to retrieve data from a local JSON file. The following is the code snippet I am using: const myReq = new Request('./data.json') fetch(myReq) .then(rawD=> rawD.json()) .then(inf ...

Having difficulties with binding 'this' in Angular/Javascript?

Currently, I am attempting to integrate the pullToRefresh package into my Angular application. Here is the code snippet: const ptr = pullToRefresh.init({ mainElement: '.dashboard-container', onRefresh() { ...

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

I'm currently using react chart js for displaying a doughnut in my component. "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0", However, I'm facing an issue where the title is not being displayed: const d ...

How about passing some vue props data over?

I am trying to assign different colors based on the percentage of each of the 5 batteries. However, the issue I'm facing is that the color spread is not specific to each individual battery. I suspect this issue arises because the bmss data is being r ...

Discover the route followed by an object containing a specific key within an array of objects

Imagine having an array of dictionaries like the one below. How can I locate the object with id: 121 using JavaScript? I've been struggling to figure this out and would appreciate any hints or algorithms on how to achieve this. The desired result sho ...

Exploring the contents of a dropdown menu by navigating through a tree structure in React JS

A unique custom component has been developed, featuring a dropdown with a tree-like structure inside that allows users to search for values. However, it seems that the search function only works after reaching two levels of the tree structure. Currently, ...

What does "t=" represent in the socketIO URL?

I am just starting to learn about socketIO, and I have noticed that every time I connect to a node server through socketIO, it creates a URI that looks like https://XXX:8080/socketIO/1/?t=XXXXXXXXXXX Could someone explain what the "?t=XXXXX" part is for ...

I encountered an error in the console stating that it cannot read the property tostring() in JavaScript

Having trouble with an error message: "cannot read tostring()". I've included my code below for reference: function convertRounding(nValue) { var sArr = nValue.toString("0.00000").split('.'); **var sVal = sArr[1].toString();** ...

What is the best way to organize a json based on numerical values?

Can anyone guide me through sorting a JSON data into an array based on numeric value, and then explain how to efficiently access that information? {"362439239671087109":{"coins":19},"178538363954003968":{"coins":18},"234255082345070592":{"coins":137}} Th ...

Is it possible to transfer an HTML table to a PowerPoint presentation directly from the client

Is there a specific jquery or javascript solution available for converting an HTML table directly into a PowerPoint presentation? So far, the only solution I have come across is html table export, which provides export options for various file formats. H ...

"Exploring the world of AngularJS routing and using htaccess for rewriting URLs

How can I seamlessly integrate AngularJS ngRoute and htaccess rewrite? Currently, my ngRoute setup generates URLs like this: http://domain.com/#/something/somestring However, I would prefer cleaner URLs like: http://domain.com/something/somestring In ...

Send the content written in summernote to an AJAX request

I'm having trouble with ajax and javascript, so I need to ask for assistance. Within a form, I have an editor (using summernote editor). <div id="summernote">summernote text</div> After that, I use this ajax function to send the form dat ...

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

After watching a tutorial on using Javascript with Autocomplete and a JSON file, I implemented the code successfully. However, I encountered an issue: When I clear the input field, all results from the file are displayed. I've tried adding code to cl ...

Is there a way in CSS to create a fading trail behind a moving particle?

I have successfully made the particle move around as desired, but now I want to create a fading trail behind it. I'm unsure of how to achieve this effect. Can this be accomplished with CSS alone, or do I need to incorporate jQuery? Check out the dem ...

assert.deepPartiallyEqual method designed for comparing two objects in an asymmetric manner

I've been struggling to come up with suitable names for this function, but let me explain what I'm looking for: I need an assertion function similar to assert.deepEqual(obj1, obj2), but instead of recursively comparing obj1 with obj2, it should ...

Unable to allocate a second item to an existing one

Encountering an unusual issue while trying to assign an item a second time. Initial scenario: I am working with a jqxTree containing various items as shown below: - apple - oracle - microsoft When I drag and drop one item into another, the structure loo ...

Utilizing a library across various files in Node.js

I am looking to integrate Winston for logging in my nodejs express project. Within my main file ( server.js ) I currently have the following code snippet: const winston = require('winston'); winston.level = process.env.LOG_LEVEL winston.log(&ap ...

Tag in HTML not being replaced

Within my HTML snippet, I have encountered some <br> tags <div id="reading-project"> <p>The next morning, as soon as the sun was up, they started on their way, and soon saw a beautiful green glow in the sky just before them."That must b ...

Activate automatic click or force trigger JavaScript function

In the MVC view I am working with, there is a form that allows for file submission. //Submit file <% using (Html.BeginForm("MethodName","ControllerName", FormMethod.Post, new { enctype = "multipart/form-data"})) { %> <input type=" ...