AngularJS dynamic data binding in ng-repeat

Question

I want to call an attribute of an data-binded object dynamically based on the ng-repeat object. I have created a simple setup, can anybody solve this, if it is solvable like this?

The input should get the value of the "person.item". For example: person.id -> 100

http://jsfiddle.net/q7gs3njj/

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!

Nikos Paraskevopoulos · Accepted Answer · 2016-06-28 18:41:38Z

5

Of course, just use item as 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>

And the person must be in the scope:

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

answered Jun 28, 2016 at 18:41

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gregory Peeters Over a year ago

Thanks, that did the trick! Tried that before but forgot to add my person to the scope

Collectives™ on Stack Overflow

AngularJS dynamic data binding in ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related