10

レイアウトが完全にデータ駆動型のフォームを作成しようとしています。

データソースの例：

{
    title : "Form Test",
    fields : [{
            name : "FieldA",
            type : "string",
            value : "initial value"
        }, {
            name : "FieldB",
            type : "selection",
            options : ["1", "2", "3"],
            value : "2"
        }, {
            name : "FieldC",
            type : "struct",
            value :
            [{
                    name : "FieldC1",
                    type : "string",
                    value : "initial value"
                }, {
                    name : "FieldC2",
                    type : "string",
                    value : "initial value"
                }
            ]
        }
    ]
}

ng-repeatとng-switchを使用して、「タイプ」に応じてフォーム要素を選択できると思いますが、「FieldC」に到達すると、これを再帰的に実行することになると行き詰まります。

<span ng-switch on="field.type">
    <div ng-switch-when="string">STRING: {{field.value}}</div>
    <div ng-switch-when="selection">SELECTION: {{field.value}}</div>
    <div ng-switch-when="struct">STRUCT: ????</div>
    <div ng-switch-default>DEFAULT:{{field.value}}</div>
</span>

基本的に、「構造体」に遭遇したときに、ng-switchを構造体フィールドに再帰的に適用する方法が必要ですか？同じページの複数の場所で使用できるようにテンプレートを「参照」する方法はありますか？テンプレート「partials」のサポートは、ここではやり過ぎのように見えるルートを介してサーバー側で調整する必要があるようです。これは、独自のディレクティブの作成を掘り下げる必要がある場所ですか？

編集私はちょうどそれが私がしたいことをするかなりのチャンスがあるように見えるこれに遭遇しました（私はまだそれを適切にテストしていません）、それは正しい方向ですか？

4

3 に答える 3

9

この種のデータを取り、そこからフォームを作成するディレクティブを作成する必要があります。

再帰を処理する方法は、トップ レベルを含むすべてのレベルを別の構造体として処理することです。私はここでバージョンを構築しました: http://jsfiddle.net/U5Kyp/9/

何が起こっているのかを理解するために、ドキュメントのディレクティブ ガイドを必ず読んでください: http://docs.angularjs.org/guide/directive

于 2012-05-27T01:30:56.087 に答える
0

私の意見では、これは内部プラットフォーム効果の悪いケースです。ウィキペディアの引用: 「ソフトウェア アーキテクトは、使用しているソフトウェア開発プラットフォームのレプリカになるほどカスタマイズ可能なシステムを作成する傾向があり、多くの場合、そのレプリカは貧弱です」.

AngularJS には、オブジェクトのツリーをトラバースし、そこからスコープとコントローラーのスタックを構築するための強力なメカニズムが既に備わっています。それはまさに AngularJS ISであると主張することができます。

そのような忌まわしい JSON からフォームを作成することを余儀なくされた場合、最も簡単な方法はそれらを HTML に変換し (サーバー側またはクライアント側の任意の種類の単純なテンプレート言語を使用して)、次に $compile サービスを使用することだと思います。それらを angularjs アプリケーションに変換します。

于 2013-02-13T00:45:07.567 に答える