javascript - AngularJS——将 ngModel 绑定(bind)到存储在属性中的对象

Question

我正在尝试以编程方式填充输入列表。

我有类似的东西

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

非工作 fiddle @ http://jsfiddle.net/VSph2/52/当我开始我的 View 时，该字符串被复制，但是这两个值不会相互更新。

基本上我想绑定(bind)到一个通过引用或名称指定的对象，例如“Query.Keywords”，并让范围在运行时对其进行评估——但我运气不佳。

正如您在 fiddle 中看到的，我的值(value)观并没有保持同步。

Answer 1

感谢 Zack 指引我正确的方向。

无论如何，如果您使用字符串值作为绑定(bind)，例如

字段{绑定(bind):“Foo”}

然后您可以绑定(bind)到 data[Field.Binding]，这样就可以正常工作了。我的第一个示例不起作用，因为它绑定(bind)到字符串值，而不是我数据的属性本身。

工作 fiddle @ 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>