AngularJS - bind ngModel to an object stored in property

Question

I am trying to program a list of inputs.

I have something like

<div ng-repeat="field in fields">
<input ng-model="field.Binding" />
</div>

var Query = {
    Keywords: "Foo",
    Title: "Bar"
}

var Fields = [{
    Name: "Keywords",
    Binding: Query.Keywords
}, {
    Name: "Title",
    Binding: Query.Title
}];

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

function MyCtrl($scope) {
    $scope.fields = Fields;
    $scope.query = Query;
}

Broken fiddle @ http://jsfiddle.net/VSph2/52/ The string is copied when my view starts, but these two values ​​do not update each other.

Basicallyk I would like to bind to the object specified by reference or by name, for example "Query.Keywords", and evaluate it at runtime - but I'm not very lucky.

As you can see in the fiddle, my values ​​are not synchronized.

Answer 1

Thanks to Zack for pointing me in the right direction.

, , ,

{: "Foo" }

[FieldBinding], . , , .

@http://jsfiddle.net/VSph2/57/

function cQuery() {
    this.Keywords= "Foo";
    this.Title = "Bar";
}
var Query = new cQuery();
var Fields = [{
    Name: "Keyword Search",
    Binding: "Keywords"
}, {
    Name: "Title Search",
    Binding: "Title"
}];


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

function MyCtrl($scope) {
    $scope.blah = Object.keys(Query);
    $scope.fields = Fields;
    $scope.query = Query;
}

<div ng-controller="MyCtrl">
    <div ng-repeat="field in fields">{{field.Name}}
        <input type="text" ng-model="query[field.Binding]" type="text" class="form-control" id="{{field.Id}}" /> {{field.Binding}}
    </div>Elsewhere...
    <input ng-model="query.Keywords"  type="text"/> {{query.Keywords}}
</div>

Answer 2

. , .

http://jsfiddle.net/VSph2/42/

 Removed query, attached input directly to fields.