如何使用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

感谢Clint's answer，一个适用于表格的变体是：

创建一个删除自身的指令（！）

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

使用<td>元素包装逻辑：

<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 指令删除作为ng-repeat-start 一部分创建的td 元素。
• 我们需要在这里使用<td>——如果你使用<div>或<repeat-section>，这些元素会被清空（至少在Firefox中），因为<tr>只能包含<td>或<th> .
• 这适用于我的使用（表格单元格），但不是通用解决方案 - 正如您将看到的，我必须包含每个可能的元素之一；在一般情况下会变得混乱。