Шаблон AngularJS в зависимости от свойства

Question

При выполнении запроса GET с Угловым и получения ответа есть список объектов со свойством 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, и насколько я понимаю, это не обычный сценарий.

Таким образом, в основном я хотел бы быть в состоянии сделать что-то вроде:

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

Answer 1

Одним из решений является создание файла шаблона для каждого типа, как это, с помощью ngInclude:

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

, а затем есть файлы, такие как simpleObject.html, где у вас есть соответствующий HTML-код, например objectWithInteger.html:

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

Answer 2

Используйте комбинацию нг-переключателя и включают в себя нг-директивы.

<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