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控件绑定到数组条目的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

我个人会重新组织数组，使得数组条目的 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是静态的，但如果它恰好是动态的，你可以随时注意它的变化并重新计算引用...

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

3 个答案: