Javascript 数据绑定到 Angular 中数组的特定项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13880521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Data Binding to a specific item of an array in Angular
提问by nwinkler
Given a data structure that contains an array of JavaScript objects, how can I bind a certain entry from that array to an input field using Angular?
给定一个包含 JavaScript 对象数组的数据结构，如何使用 Angular 将该数组中的某个条目绑定到输入字段？
The data structure looks like this:
数据结构如下所示：
$scope.data = {
name: 'Foo Bar',
fields: [
{field: "F1", value: "1F"},
{field: "F2", value: "2F"},
{field: "F3", value: "3F"}
]
};
The fieldsarray contains several instances of the given structure, with each entry having both a fieldattribute and a valueattribute.
该fields数组包含给定结构的多个实例，每个条目都有一个field属性和一个value属性。
How can I bind an inputcontrol to the valuefield attribute of the array entry with the fieldF1?
如何使用 将input控件绑定到value数组条目的字段属性fieldF1？
<input ng-model="???"/>
I know that I could bind all fields using an ng-repeat, but that's not what I want. The above data is just an example from a much larger list of fields, where I only want to bind a pre-defined subset of fields to controls on the screen. The subset is not based on the attributes in the array entries, but is known at design time of the page.
我知道我可以使用 绑定所有字段ng-repeat，但这不是我想要的。上面的数据只是一个更大的字段列表中的一个例子，我只想将一个预定义的字段子集绑定到屏幕上的控件。该子集不基于数组条目中的属性，而是在页面设计时已知。
So for the above example, I would try to bind F1 to one input on the page, and F2 to another one. F3 would not be bound to a control.
因此，对于上面的示例，我会尝试将 F1 绑定到页面上的一个输入，将 F2 绑定到另一个输入。F3 不会绑定到控件。
I've seen examples where a function was used in the ng-model, but it doesn't seem to work with Angular 1.1.0.
我见过在 中使用函数的示例ng-model，但它似乎不适用于 Angular 1.1.0。
Is there another clever way to bind the input field to a specific array entry?
是否有另一种巧妙的方法将输入字段绑定到特定的数组条目？
Here's a fiddle that has an example, but does not work since it's trying to use function in the ng-modelattribute: http://jsfiddle.net/nwinkler/cbnAU/4/
这是一个有示例的小提琴，但由于它试图在ng-model属性中使用函数而不起作用：http: //jsfiddle.net/nwinkler/cbnAU/4/
Update
更新
Based on the recommendation below, this is what it should look like: http://jsfiddle.net/nwinkler/cbnAU/7/
根据下面的建议，它应该是这样的：http: //jsfiddle.net/nwinkler/cbnAU/7/
采纳答案by F Lekschas
I personally would reorganize the array in a way that fieldproperty of an entry of the array become the identifier of the object. Mhhh that sentence may sound strange. What I mean is the following:
我个人会以数组条目的字段属性成为对象标识符的方式重新组织数组。嗯，这句话可能听起来很奇怪。我的意思是：
$scope.data = {
name: 'F1',
fields: {
F1: {
value: "1F"
},
F2: {
value: "2F"
}
}
};
If you want to bind a the value dynamically and it's an easy and quick way to achieve it. Here is your fiddle modified so that it words. http://jsfiddle.net/RZFm6/
如果你想动态绑定一个值，这是一种简单快捷的方法来实现它。这是你的小提琴修改，以便它的话。http://jsfiddle.net/RZFm6/
I hope that helps
我希望有帮助
回答by jpillora
You can use an array of objects, just not an array of strings.
您可以使用对象数组，而不是字符串数组。
HTML:
HTML：
<div ng-repeat="field in data.fields">
<input ng-model="field.val"/>
</div>
JS:
JS：
$scope.data = {
name: 'F1',
fields: [
{ val: "v1" },
{ val: "v2" }
]
};
I've updated @Flek's fiddle here: http://jsfiddle.net/RZFm6/6/
我在这里更新了@Flek 的小提琴：http: //jsfiddle.net/RZFm6/6/
Edit: Sorry just read your question properly, you can still use an array with:
编辑：对不起，只是正确阅读您的问题，您仍然可以使用数组：
<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>
though maybe stop and think. Is there going to be variable number of fields ? or are you making a predetermined number of fields ? Use an array in the former and an object for the latter.
虽然也许停下来想一想。是否会有可变数量的字段？或者您正在制作预定数量的字段？前者使用数组，后者使用对象。
回答by bmleite
One way to do it is to simply add the necessary references to the scope, like this:
一种方法是简单地向作用域添加必要的引用，如下所示：
$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');
And then use those references:
然后使用这些引用：
<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>
Fiddle: http://jsfiddle.net/cbnAU/5/
小提琴：http: //jsfiddle.net/cbnAU/5/
Note: I'm assuming that $scope.datais static, but if it happens to be dynamic you can always watch for changes on it and recalculate the references...
注意：我假设它$scope.data是静态的，但如果它碰巧是动态的，你可以随时观察它的变化并重新计算引用......
