有没有办法添加“虚拟”html元素以在ng-repeat中添加多级迭代？答案

【问题标题】：Is there any way to add a "dummy" html element to add multi-level iteration in an ng-repeat?有没有办法添加“虚拟”html元素以在ng-repeat中添加多级迭代？
【发布时间】：2016-09-13 19:52:00
【问题描述】：

我经常发现自己需要一个 ng-repeat 对 DOM 中的任何内容都不应该对应的东西。例如，假设我有以下对象：

groupedHeaders = {
  'group1' : ['header1', 'header2'],
  'group2' : ['header3', 'header4', 'header5'],
  'group3' : [.....],
  ...,
  ...,
  'groupN' : [....]
}

我想创建一个包含所有标题的表格。所以我想做这样的事情来给我一行，每个标题有一个元素：

<tr>
  <dummy ng-repeat="(group, headers) in groupedHeaders">
    <th nr-repeat="header in headers">
      {{header}}
    </th>
  </dummy>
</tr>

所以“虚拟”元素只是为我的迭代添加了另一个“级别”（比如有两个 for 循环）。

有什么方法可以在与 DOM 中的任何内容都不对应的元素上设置 ng-repeat？

如果没有，我是否缺少有关如何执行此操作的基本知识？我正在使用 Angular 1.2。

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

唯一的解决方案似乎是 DOM 中没有任何逻辑的“虚拟”元素。

如果你在标签前面加上“data-”，它甚至是 HTML5 兼容的。

<tr>
  <data-ng-repeat-dummy ng-repeat="(group, headers) in groupedHeaders">
    <th nr-repeat="header in headers">
      {{header}}
    </th>
  </data-ng-repeat-dummy>
</tr>

显然，您也可以创建一个什么都不做的非常空的指令，基本上是创建相同的代码。（使用 ng-transclude）

<data-ng-repeat-dummy ng-repeat="(group, headers) in groupedHeaders" ng-transclude>

angular.module('mymodule', []).directive('dataNgRepeatDummy', [function () {
    return {
        restrict: 'E',
        scope: {},
        transclude: true
    };
}]);

如果您在指令中添加“replace:true”，您甚至可以将其完全从 DOM 中取出。但是，replace:true 已被弃用：Why is replace deprecated in AngularJS?

或者，如果适用，您可以将控制器中的数据展平。

【讨论】：