Как вывести массив различных элементов в последовательности, используя Angularjs

Question

У меня есть код, который генерирует описание строки таблицы HTML, например:

  [
    {element: 'th', content: 'Header 1'},
    {element: 'td', content: 'data 1'},
    {element: 'td', content: 'data 2'},
  ]

Я хотел бы вывести их с помощью angularjs, что-то вроде

<tr>
  <td ng-repeat="item in row" >{{item.content}}</td>
</tr>

За исключением того, что я не могу понять, как это может обработать элемент (ы), которые должны быть <th>?

(например, Vuejs имеет <td v-is="item.element">{{item.content}}</td>, но Я работаю в приложении angularjs, поэтому этот пример приводится на случай, если он поможет Vuejs людям понять, что мне нужно.)

Answer 1

Благодаря ответу Клинта , вариант, который работает с таблицами:

Создать директиву, которая удаляет себя (!)

angular.module('theapp').directive('repeatSection', function () {
  return { restrict: 'A', replace: true, link(scope, el) { el.remove(); } };
});

Использовать <td> элементы, чтобы обернуть логи c:

<table>
 ...
 <tbody>
   <tr ng-repeat="row in rows">

     <td repeat-section ng-repeat-start="cells in row"></td>
     <th ng-if="cell.element === 'th'">{{cell.content}}</th>
     <td ng-if="cell.element === 'td'">{{cell.content}}</td>
     <td repeat-section ng-repeat-end></td>

   </tr>
 </tbody>
</table>

• директива repeat-section удаляет элементы td, созданные как часть ng-repeat-start.
• , которую мы необходимо использовать <td> здесь - если вы используете даже <div> или <repeat-section>, эти элементы очищаются (по крайней мере, в Firefox), поскольку <tr> может содержать только <td> или <th>.
• это работает для моего использования (ячейки таблицы), но не является общим решением - как вы увидите, мне пришлось включить один из каждого возможного элемента; это было бы грязно в общем случае.