The magic of data binding in AngularJS's ng-repeat

Is it possible to dynamically call an attribute of a data-binded object based on the ng-repeat object? I have set up a simple example, but I'm not sure if it can be solved this way. Can anyone help with this?

The goal is for the input to receive the value of "person.item". For instance: person.id -> 100

Link to Example

HTML:

<div ng-app ng-controller="TestController">
    <div ng-repeat="item in list">
        <label>{{ item }}:</label>
        <input type="text"/>
    </div>
    {{list}}
</div>

JavaScript:

function TestController($scope) {
    $scope.list = [ 'id', 'name', 'gender' ];

    $person = { id:'100', name:'John', age:'22', gender:'Male' };

}

Thank you!

Answer №1

Sure thing, simply use item as the index:

<div ng-app ng-controller="TestController">
    <div ng-repeat="item in list">
        <label>{{ item }}:</label>
        <input  type="text" ng-model="person[item]"/>
    </div>
    {{list}}
</div>

Make sure the person is within the scope:

function TestController($scope) {
    $scope.list = [ 'id', 'name', 'gender' ];
    $scope.person = { id:'100', name:'John', age:'22', gender:'Male' };   
}

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

Execute a specialized function with imported modules and specified parameters

Within an npm project, I am looking to execute a custom function with arguments, or ideally provide it as a script in the package.json file like this: npm run custom-function "Hello, World". Currently, I have a file called src/myFunction.ts: import * as e ...

How can I verify if a user is logged in using express.Router middleware?

Is there a way to incorporate the isLoggedIn function as a condition in a get request using router.route? const controller = require('./controller'); const Router = require('express').Router; const router = new Router(); function isLo ...

Tips on utilizing a single modal to showcase various images

Based on the database table rows, my page will be populated with multiple rows (currently 32). Each row includes an image and a button/link at the end. I need a popup (#modal) to display the image fetched from the database when the button is clicked. I wa ...

Real-time chat system using PHP for one-on-one inquiries with server-sent events (not a group chat)

I'm currently working on developing a live chat inquiry form for a website using HTML server-sent events. I'm utilizing this tutorial as a foundation Here is my plan based on the tutorial: On the client side, users are prompted to enter a use ...

PHP query for beginners. Integrating JavaScript into a PHP webpage

Hey there! I am not familiar with PHP development, as I have never worked with it before. However, I have been tasked with adding a Google Shopping cart tracking code to a website. After someone completes an order, they are sent to finishorder.php. Upon re ...

Using blending modes with gradient colors in an SVG design

I'm struggling to get my logo to change colors upon scrolling into a button with similar gradient colors, but I just can't seem to make it work. Can anyone lend me a hand? Thank you! Take a look at my Logo. I've attempted to add some styles ...

For each item they possess, attach a "!" at the end

Given an array, I am trying to use map to add an exclamation mark to each item in the array. For example: Before - items: ["ball", "book", "pen"] After - items: ["ball!","book!","pen!"] const array = [ { username: "john", team: "red", score: 5 ...

Why is my filtering and sorting function failing to function properly?

I have a collection of events represented by an array of objects, where each event contains a start date and an end date. My goal is to filter out any events that have already passed based on the current time (now), and then sort the remaining events in d ...

Checking the validity of a JSON file extension using regular expressions

Using EXTJS, I have created a file upload component for uploading files from computer. I need to restrict the uploads to JSON files only and want to display an error for any other file types. Currently, I am able to capture the filename of the imported fil ...

Karma, Webpack, and AngularJS are successfully passing all tests, yet encountering karma errors with an exit code of 1

Currently running karma 4.0.1, webpack 4.31.0, angular 1.6.8, karma-jasmine 2.0.1, jasmine-core 3.4.0 Recently at my workplace, I transitioned our angularjs application from a traditional gulp build process to webpack + es6. The journey has been smooth wi ...

Changing the state of a form field to "dirty" using Angular.js programmatically

When updating fields on my form programmatically with a value, I want to set the field state to $dirty. However, trying $scope.myForm.username.$dirty = true; doesn't seem to have any effect. I noticed that there is a $setPristine method available to ...

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

Unexpected behavior: jQuery events failing to execute while triggering the 'change' event with fireEvent

Issue seen in IE7-8. Here's a simple illustration: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javas ...

Implementing role-based authentication in Next.js using Next-auth and Firebase

Currently, I'm in the process of integrating role-based authentication using NextAuth.js into my Next.js application. Despite following the provided documentation meticulously, an error (in profile snippet and callback snippet which I copied from next ...

Using Selenium to continuously scroll to the bottom of the webpage

Selenium: I am new to WebDriverJS. I have experimented with this method in Java. Long repeat = 0l, scrollHeight = 0l, returnHeight = 0l; while(true){ if (repeat == 0) { returnHeight = (Long) jse.executeScript("var scroll =document.documentEle ...

Instruct npm to search for the package.json within a designated directory

Imagine having a folder structure that looks like this: root |-build |-package.json |-src |-foo |-foo.csproj |-foo.cs |-bar.cs |-bin |-... |-foo.sln Now, if you change the current directory to root\src\foo\bin a ...

Exploring the contents of this JSON array

I'm trying to fetch data from this link: <script type="text/javascript"> $.getJSON('http://api01.notaion.com/?item&id=120001462', function(data) { }); </script> I am uncertain whether I need to use a callback=?, a ...

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

I'm facing an issue with my NextJS application that showcases a list of audio tracks using an <AudioTrackEntry> component. This component receives props like the Track Title and a Link to the audio file from an external data source. Within the ...

The registration feature powered by JQuery is experiencing technical difficulties and not functioning

Having trouble with a registration system on my website at *. When someone registers, it should either show an error message or display "true" if the registration is successful. I have a javascript file (http://pastebin.com/mv9CWZcT) set up to redirect the ...

What is the method for inserting form control values into a QueryString within HTML code?

Struggling with passing HTML form control values into a QueryString for page redirection. While I can easily input static values into a QueryString and retrieve them using PHP's GET method, I am encountering difficulties when it comes to dynamic valu ...