0

いくつかの「人物プロパティ」を持つ人物オブジェクトがあるとします。

personModel = {
 membership-number : "abcd",
 name : "Anonymous",
 dob : "14/04/2009",
 avatar : "image.png"
}

これらの「個人特性」に関するメタデータがあるとしましょう。

meta-data = {
 membership-number: {data-type : "string", editable : "false"},
 name : {data-type : "string", editable : "true"},
 dob : {data-type : "date", editable : "true"},
 avatar : {data-type : "image", editable : "true"}
}

ここで、次の制約を持つページに personModel のこれらのプロパティをリストしたいと思います。文字列で編集できないメンバーシップ名は、ラベルとして表示する必要があります。テキスト ボックスとして編集可能なすべての文字列、日付ピッカーを使用したすべての日付タイプなど。

これは角度ディレクティブで実行できることを知っています。personObject の「person-properties」を反復処理する person というディレクティブを用意します。

<person ng-model={{personModel}}> </person>

次のように、個人内の「個人プロパティ」ごとにディレクティブがあります。

<person-property ng-repeat = {{prop in person-properties}}> </person-property>

また、プロパティ ディレクティブがメタデータにアクセスできると仮定しましょう。プロパティ タイプに基づいてテンプレートを取得するには、このスケルトンのように、返すテンプレートを選択するために、人物プロパティの定義に if-else を記述します。

if(property_type === "date"){
   template = "<datepicker> </datepicker>"
}
else if (property-type === "numeric"){
   template = "<numeric-editable-box> </numeric-editable-box>"
}

しかし、これを行うためのよりエレガントな方法はありますか?

WPF には、これを行うための TemplateSelector というものがあります。angularには、私が気付いていないようなものがありますか?

4

2 に答える 2

1

ng-switchそれはあなたのニーズに合うかもしれないと思います。メタデータをオンにして、適切な要素を表示します。

<div ng-switch="property_type">
  <datepicker when="date"></datepicker>
  <numeric-editable-box when="numeric"></numeric-editable-box>
</div>

等...

于 2012-10-11T06:44:50.727 に答える
0

これは良いアプローチです。私は最近、データの反復に基づいてカスタム ディレクティブを動的に選択するこの手法について書きました。 http://whatsthebigit.blogspot.com/2013/07/dynamic-directives-with-angular.html

于 2013-07-10T15:04:02.217 に答える