CODEWITHSUNDEEP
javascriptangularjsobjectdata-bindingangularjs-ng-repeat
gregory Peeters
gregory Peeters

Reputation: 31

AngularJS dynamic data binding in ng-repeat

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!

Upvotes: 3

Views: 1346

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40328

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

Upvotes: 5

Related Questions