数据绑定到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 属性。

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

<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

我个人会重新组织数组，使数组条目的 field 属性成为对象的标识符。嗯，这句话听起来可能很奇怪。我的意思是：

$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"/>

虽然也许停下来想一想。是否会有可变数量的字段？还是您正在制作预定数量的字段？前者使用数组，后者使用对象。

Answer 3

一种方法是简单地将必要的引用添加到范围，如下所示：

$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');

然后使用这些引用：

<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>

小提琴：http://jsfiddle.net/cbnAU/5/

注意：我假设 $scope.data 是静态的，但如果它恰好是动态的，您可以随时观察它的变化并重新计算引用...