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

非工作小提琴@ http://jsfiddle.net/VSph2/52/ 我启动视图时会复制该字符串，但这两个值不会互相更新。

基本上我想绑定到引用或名称指定的对象，例如“Query.Keywords”，并让范围在运行时对此进行评估 - 但我没有太多运气。

正如你在小提琴中看到的那样，我的价值观并没有保持同步。

Answer 1

感谢扎克指导我朝着正确的方向前进。

无论如何，如果你使用字符串值进行绑定，例如

Field {Binding：“Foo”}

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

工作小提琴@ 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.

AngularJS - 将ngModel绑定到存储在属性中的对象

2 个答案: