13

给定一个包含 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/

4

3 回答 3

12

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

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

如果您想动态绑定值，这是实现它的一种简单快捷的方法。这是您的小提琴修改后的单词。http://jsfiddle.net/RZFm6/

我希望这会有所帮助

于 2012-12-14T14:58:32.487 回答
8

您可以使用对象数组，而不是字符串数组。

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

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

于 2013-06-01T05:50:40.727 回答
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是静态的，但如果它碰巧是动态的，你可以随时观察它的变化并重新计算引用......

于 2012-12-14T15:01:48.023 回答