數據綁定到在角

給定一個數據結構，它包含JavaScript對象的陣列的陣列的特定項目，如何可以結合來自該陣列使用角的輸入字段特定條目？數據綁定到在角

的數據結構是這樣的：

$scope.data = { 
    name: 'Foo Bar', 
    fields: [ 
     {field: "F1", value: "1F"}, 
     {field: "F2", value: "2F"}, 
     {field: "F3", value: "3F"} 
    ] 
};

的fields陣列包含給定的結構的幾個實例，以同時具有field屬性和屬性value每個條目。

如何將input控件綁定到數組條目的value字段屬性與fieldF1？

<input ng-model="???"/>

我知道我可以結合使用ng-repeat所有領域，但是這不是我想要的。上述數據只是一個更大的字段列表的例子，我只想將預定義的字段子集綁定到屏幕上的控件上。子集不是基於數組條目中的屬性，而是在頁面設計時已知的。

因此，對於上面的例子中，我會嘗試F1綁定到頁面上的一個輸入和F2到另一個。 F3不會被綁定到控件上。

我看到那裏的ng-model被使用的函數的例子，但它似乎並沒有與角1.1.0工作。

是否有輸入字段綁定到特定的陣列進入另一種巧妙的方式？

下面是有一個例子的小提琴，但因爲它試圖在ng-model屬性使用功能不起作用：http://jsfiddle.net/nwinkler/cbnAU/4/

更新

基於下面的建議，這是它應該看起來像：http://jsfiddle.net/nwinkler/cbnAU/7/

來源

2012-12-14 nwinkler

我個人會以字段的方式重新組織數組的一個條目的屬性成爲該對象的標識符克拉。嗯，這句話聽起來很奇怪。我的意思是這樣的：

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

如果要動態綁定的值，它是一個簡單，快捷的方式來實現它。這裏是你的小提琴修改，以便它的話。http://jsfiddle.net/RZFm6/

我希望幫助

來源

2012-12-14 14:58:32

是的，將陣列重組爲更好的結構也是我的想法。我不確定這是否可行，因爲我們從後端服務接收到JSON。我不得不問他們是否改變了結構。 – nwinkler

@nwinkler如果更改底層模型往往反正對你有意義的綁定前一次預處理陣列（控制器內），因爲與當前的結構則需要每綁定一個新的模式時間搜索陣列。重組你通過對象循環一次，你就完成了。如果他們爲你更換API，它甚至更好:) –

接受此答案，因爲我認爲這是正確的方式來做到這一點。我們將研究改變數據的格式並像你所描述的那樣使用它。 – nwinkler

一種方式做到這一點是簡單地將必要的引用添加到的範圍，就像這樣：

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

，然後使用這些引用：

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

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

注：我是大ass ng $scope.data是靜態的，但如果它恰好是動態的，您可以隨時觀察其上的變化並重新計算引用...

來源

2012-12-14 15:01:48 bmleite

數據是動態的（從後端服務接收），並且這將包含一個大型油田的名單。你有什麼建議的作品，而不是供我們使用情況的切實可行的。 – nwinkler

您可以使用一個對象數組，而不是一串字符串。

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-01 05:50:40 jpillora

這裏值得注意的是，如果你嘗試，而不必一個領域[0]位置模型領域[1]，angularJS將它解釋爲一個地圖。這可能與預期數組的Spring控制器衝突。這真的很難錯過，因爲「場[0]」可以被解釋爲兩個數組POS和地圖POS。 –

數據綁定到在角

回答

相關問題