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

Question

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!

javascript angularjs object data-binding angularjs-ng-repeat

Answer 1

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' };   
}

Answer 2

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' };   
}

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

Answer №1

Similar questions

Retrieve information using AngularJS only when it is not yet defined

Personalize the marker design within the Wikitude SDK using JavaScript

Rows per page options fail to display in the DataTable component

Leverage ngFor to loop through a "highly intricate" data structure

How to redirect to a different view or controller using ASP.NET and AngularJS

The absence of shapes in containers is noticeable in the stage setting

Generate a collection of items through replication

Adjust image size while maintaining aspect ratio

Encountering a problem with Vue when running the node-rdkafka package

"Error alert: The specified property 'Iscontains' cannot be read because it is undefined" appears in the script for this video

Invoke a parent method from a nested child component in Vue

Library of Angular components - utilizing images in templates

What are the optimal scenarios for utilizing angular $q and how should it be

Updating a component with React JS setState() must be done on a mounted or mounting component

Angular - Ensure completion of a function call before continuing with the code execution

Exploring the process of incorporating a JavaScript library into an Angular project

What is the best way to interweave my objects within this tree using recursion?

Regular expressions for capturing login usernames

Discover Vue3's efficient event handling feature that allows you to easily listen to events from dynamically generated child components

How can I transfer a PHP variable into a JavaScript variable nested within another PHP variable