数据绑定到Angular中的数组的特定项

Question

给定一个包含JavaScript对象数组的数据结构,如何使用Angular将该数组中的某个条目绑定到输入字段？

数据结构如下所示:

$scope.data = {
    name: 'Foo Bar',
    fields: [
        {field: "F1", value: "1F"},
        {field: "F2", value: "2F"},
        {field: "F3", value: "3F"}
    ]
};

该fields数组包含给定结构的多个实例,每个条目都具有field属性和value属性.

如何将input控件绑定到value数组条目的field属性field F1？

<input ng-model="???"/>

我知道我可以使用一个绑定所有字段ng-repeat,但这不是我想要的.上面的数据只是一个更大的字段列表中的一个例子,我只希望将预定义的字段子集绑定到屏幕上的控件.子集不是基于数组条目中的属性,而是在页面的设计时知道.

所以对于上面的例子,我会尝试将F1绑定到页面上的一个输入,将F2绑定到另一个输入.F3不会受到控制的约束.

我已经看过使用函数的示例ng-model,但它似乎不适用于Angular 1.1.0.

是否有另一种巧妙的方法将输入字段绑定到特定的数组条目？

下面是有一个例子的小提琴,但因为它试图在使用功能不起作用ng-model属性:http://jsfiddle.net/nwinkler/cbnAU/4/

更新

根据以下建议,它应该是这样的:http://jsfiddle.net/nwinkler/cbnAU/7/

Answer 1

我个人会以一种方式重新组织数组,即数组条目的字段属性成为对象的标识符.这句话可能听起来很奇怪.我的意思是:

$scope.data = {
    name: 'F1',
    fields: {
        F1: {
           value: "1F"
        },
        F2: {
           value: "2F"
        }
    }
};

如果要动态绑定值,这是一种简单快捷的方法.这是你的小提琴修改,以便它的话.http://jsfiddle.net/RZFm6/

我希望有所帮助

Answer 2

您可以使用对象数组,而不是字符串数组.

HTML:

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

JS:

$scope.data = {
    name: 'F1',
    fields: [
        { val: "v1" },
        { val: "v2" }
    ]
};

我在这里更新了@Flek的小提琴:http://jsfiddle.net/RZFm6/6/

编辑:抱歉,只需正确阅读您的问题,您仍然可以使用以下数组:

<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>

虽然也许停下来思考.是否会有可变数量的字段？或者你在预定数量的领域？在前者中使用数组,在后者中使用对象.