11

AngularJSアプリを作成していますが、問題が発生しました。私はしばらくの間フレームワークで遊んでいますが、このようなものや例のドキュメントはまだ見ていません。どのパスをたどるのか、ディレクティブ、モジュール、またはまだ聞いたことがないものがわかりません...

問題：

基本的に、私のアプリでは、ユーザーがオブジェクトを追加できます。この例では、編集可能な特定の属性（高さと関連するラベル）を持つオブジェクトをスパンと言います。すべてのスパンに高さとラベル操作用の専用の入力フィールドがあるのではなく、スパンオブジェクトのすべての反復を制御できる1セットの入力フィールドを使用したいと思います。

だから私の約。動作するコードは次のようなものです。

<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-modelの値が更新され、クリックされたオブジェクトにバインドされます。したがって、「object_2」をクリックすると、入力のng-modelが更新され、object_2の値と同期されます。ユーザーが「object_4」をクリックすると、入力のng-modelが更新され、アイデアが得られます。本質的にスマートUI。

ng-modelステータスをバインドされたUIにプッシュできる「sync」と呼ばれるディレクティブ属性を作成することを考えました。と呼ばれる新しいタグを完全に作成<object>し、コントローラーでこれらを作成することについては説明しました。ng-click="someFn()"そして、それを使用して入力フィールドを更新することを考えました。これらはすべて、独自の長所と短所がある「可能性」ですが、私が何かにスピンアウトするか、間違った道を進む前に、私はコミュニティに尋ねると思いました。

誰かが以前にこれをしたことがありますか（もしそうなら、例）？そうでない場合、これを実行するための最もクリーンなAngularJSの方法は何でしょうか？乾杯。

4

1 に答える 1

14

この状況に特にカスタム ディレクティブを使用する必要はないと思いますが、コントロールがより複雑になると、アプリで役立つ場合があります。

少しフォーマットを追加して、この可能な解決策を見てみましょう: http://jsfiddle.net/tLfYt/

これを解決する最も簡単な方法は次のとおりだと思います: - 「選択した」インデックスをスコープに保存する - ng-click を繰り返しスパンにバインドし、これを使用してインデックスを更新します。

そこから、あなたが提案したとおりに行うことができます: 入力のモデルを更新します。この宣言的な考え方は、私が Angular で気に入っている点です。アプリケーションは、問題について論理的に考えるのと同じように流れることができます。

コントローラーで:

$scope.selectedObjectIndex = null;

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

あなたのng-repeatで：

<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']"/>
于 2013-03-04T01:15:07.180 に答える