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

上記のコードは、ユーザーが新しいオブジェクトを追加できますが、UIは明らかに、配列の最初のオブジェクトにハードコードされています。

目的の機能：

ユーザーは、それがクリックされたオブジェクトにバインドするために、入力のNG-モデルの値を更新したオブジェクトをクリックします。したがって、 "object_2"をクリックすると、入力のng-modelが更新され、object_2の値と同期されます。ユーザーが「object_4」をクリックすると、入力のngモデルが更新されます。本質的にスマートUI。

ng-modelのステータスをバインドされたUIにプッシュできる「sync」というディレクティブ属性を作成することを考えました。私は<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']"/>