數據綁定到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控件綁定到具有field F1的數組條目的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

我個人會以一種方式重新組織數組，即數組條目的字段屬性成為對象的標識符。 這句話可能聽起來很奇怪。 我的意思是：

$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是靜態的，但如果它恰好是動態的，你可以隨時觀察它的變化並重新計算引用...