プロパティに応じたAngularJSテンプレート

Question

GETリクエストをAngularで実行してレスポンスを取得するときは、typeというプロパティを持つオブジェクトのリストがあります。このタイプ（場合によってはその他の追加チェック）によっては、オブジェクトの残りのプロパティを予測できます。例：だから

{ "type": "simpleObject", "name": "A Simple Object" } 
{ "type": "objectWithInteger", "name": "Another Object", "number": 10 } 

私はそれぞれ異なるオブジェクトのための適切なHTMLを持っているために、事前に定義されたテンプレートを適用することができるか、これらのオブジェクトのリストを反復処理？

たとえば、タイプが"simpleObject"の場合、simple-object.htmlテンプレートを使用します。 "objectWithInteger"の場合、object-with-integer.html部分です。

これはできますか？たぶんcomponentと？私はAngularをあまり経験していません。これが通常のシナリオではないことが分かります。 ngIncludeを使用することにより、

<ul> 
    <li ng-repeat="object in objects"> 
    {{ appropriate_template(object) }} 
    </li> 
</<ul> 

Answer 1

一つの解決策は、このような種類ごとにテンプレートファイルを作成することです：

だから、基本的には私のような何かを行うことができるようにしたいと思います

<ul> 
    <li ng-repeat="object in objects" ng-include="'/path/to/templates/'+object.type+'.html'"> 
    </li> 
</<ul> 

とそれに続いてsimpleObject.htmlのようなファイルがあります。 objectWithInteger.html：

Name: {{object.name}}, Number: {{object.number}} 

Answer 2

NG-スイッチとNG-含まディレクティブを組み合わせて使用​​してください。

<div ng-repeat="object in objects"> 
    <div ng-switch="object.type"> 
     <div ng-switch-when="simpleObject"> 
     <ng-include src="'simpleObject.html'"></ng-include> 
     </div> 
     <div ng-switch-when="objectWithInteger"> 
     <ng-include src="'objectWithInteger.html'"></ng-include> 
     </div> 
    </div> 
    </div> 

ここで私は、これが最もエレガントな答えだと思う作業plunk