AngularJS中的動態數據綁定

Question

我正在構建一個AngularJS應用程序，並且遇到了問題。我一直在玩這個框架一段時間，我還沒有看到像這樣或任何例子的文檔。我不知道去哪個路徑下，指令，模塊或東西，我還沒有聽說過的又...

問題：

基本上我的應用程序允許用戶添加對象，我們會爲此示例說明跨度，它們具有可編輯的特定屬性：高度和關聯的標籤。而不是每個跨度都有自己的高度和標籤操作專用輸入字段我想使用一組輸入字段來控制跨度對象的所有迭代。

所以我的約。工作的代碼是這樣的：

<span ng-repeat="widget in chart.object"> 
    <label>{{widget.label}}</label> 
    <span id="obj-js" class="obj" style="height:{{widget.amt}}px"></span> 
</span> 
<button ng-click="addObject()" class="add">ADD</button> 

<input type="text" class="builder-input" ng-model="chart.object[0]['label']"/> 
<input type="range" class="slider" ng-model="chart.object[0]['amt']"/> 

上面的代碼將讓用戶添加新的對象，但用戶界面顯然是硬編碼到陣列中的第一個對象。

期望的功能：

當用戶點擊的對象上它更新輸入的NG-模型的值綁定到對象點擊。所以如果點擊「object_2」，輸入的ng模型會更新以與object_2的值同步。如果用戶點擊「object_4」，它會更新輸入的ng模型，您就會明白。智能UI，本質上。

我想過編寫一個名爲「sync」的指令屬性，可以將ng-model狀態推送到綁定的UI。我想完全創建一個名爲<object>的新標籤並在控制器中構建這些標籤。我想過使用ng-click="someFn()"更新輸入字段。所有這些都是「可能性」，都有自己的優點和缺點，但是我之前想過要麼轉出一些東西，要麼走錯路，我會問社區。

有沒有人做過這個（如果是這樣，例子）？如果沒有，那麼最乾淨的AngularJS的方式是什麼？乾杯。

Answer 1

我不認爲你需要專門爲這種情況使用自定義指令 - 儘管這可能會有助於你的應用程序，一旦你的控件更加涉及。

採取的看看這個可能的解決方案，有一點格式添加的： http://jsfiddle.net/tLfYt/

我認爲解決這個最簡單的方法要求： - 商店「選擇」的範圍 指數 - 綁定NG-點擊到每個重複的跨度，並使用它來更新索引。

從那裏，你可以完全按照你的建議：更新輸入模型。這種聲明式思維方式是我喜歡Angular的 - 我的應用程序可以按照您邏輯思考問題的方式流動。

在你的控制器：

$scope.selectedObjectIndex = null; 

$scope.selectObject = function($index) { 
    $scope.selectedObjectIndex = $index; 
} 

在您的NG-重複：

<span ng-repeat="widget in chart.object" ng-click="selectObject($index)"> 

你輸入：

<input type="text" class="builder-input" ng-model="chart.object[selectedObjectIndex]['label']"/> 
<input type="range" class="slider" ng-model="chart.object[selectedObjectIndex]['amt']"/>