11

動的フィールド構成に基づいてフォームをレンダリングしたい:

$scope.fields = [
    { title: 'Label 1', type: 'text', value: 'value1'},
    { title: 'Label 2', type: 'textarea', value: 'value2'}
];

これにより、次のように動作するものが出力されます。

<div>
    <label>{{field.title}}<br />
        <input type="text" ng-model="field.value"/>
    </label>
</div>
<div>
    <label>{{field.title}}<br />
        <textarea ng-model="field.value" rows="5" cols="50"></textarea>
    </label>
</div>

簡単な実装は、ifステートメントを使用して各フィールド タイプのテンプレートをレンダリングすることです。ただし、Angular はステートメントをサポートしていないためif、ディレクティブの方向に進みます。私の問題は、データバインディングがどのように機能するかを理解することです。ディレクティブのドキュメントは少し複雑で理論的です。

ここでやろうとしていることの基本的な例をモックアップしました: http://jsfiddle.net/gunnarlium/aj8G3/4/

問題は、フォーム フィールドがモデルにバインドされていないため、submit() の $scope.fields が更新されないことです。私のディレクティブ関数の内容はかなり間違っていると思います... :)

今後は、ラジオ ボタン、チェック ボックス、選択など、他のフィールド タイプもサポートする必要があります。

4

3 に答える 3

23

作成しようとしているディレクティブに関係なく、最初に遭遇する問題は、フォーム要素を含むフォーム内で ng-repeat を使用することです。ng-repeat が新しいスコープを作成する方法は難しい場合があります。

このディレクティブは新しいスコープを作成します。

element.html を使用する代わりに、部分テンプレートでngSwitchを使用することもお勧めします。

<div class="form-row" data-ng-switch on="field.type">
    <div data-ng-switch-when="text">
        {{ field.title }}: <input type="text" data-ng-model="field.value" />
    </div>
    <div data-ng-switch-when="textarea">
        {{ field.title }}: <textarea data-ng-model="field.value"></textarea>
    </div>
</div>

これでも、ng-repeat が原因で子スコープのフォーム要素を変更するという問題が残ります。そのため、各要素で ngChange メソッドを使用して、項目が変更されたときに値を設定することをお勧めします。これは、現時点で AngularJS がうまく処理できない数少ない項目の 1 つです。

于 2013-03-08T15:53:56.483 に答える