Sergej Popov Sergej Popov - 2 months ago 11
AngularJS Question

AngularJS: ng-repeat with key value - updating object

I am rendering key:value object array with ng-repeat like this:

<div ng-controller="mainCtrl">
<div ng-repeat="record in records">
<div ng-repeat="(key, value) in record">
<input ng-model="key" />: <input ng-model="value" />
</div>
</div>
</div>


JS:

var mainCtrl = function($scope){
$scope.records = [
{'key1':'val1'},
{'key2':'val2'}
];
}


Problem is that keys and values cannot be updated through input tags. For some reason it becomes one way binding after making ng-repeat iterate over (key,value).

Fiddle: http://jsfiddle.net/BSbqU/1/

How can I make it a two way binding? Or should I approach this problem in a different way then nested ng-repeat?

Answer
<div ng-controller="mainCtrl">    
<div ng-repeat="record in records">

        <input ng-model="record.name" />: <input ng-model="record.value" />
    </div>
</div>

And the JS:

var myApp = angular.module('myApp', []);

var mainCtrl = function($scope){
$scope.records = [
{'name':'key1','value':'val1'},
{'name':'key2', 'value':'val2'}
        ];
}