AngularJS 创建虚拟指令答案

【问题标题】：AngularJS creating dummy directiveAngularJS 创建虚拟指令
【发布时间】：2014-07-30 19:14:13
【问题描述】：

我想在 AngularJS 中创建一个“虚拟”元素来制作嵌套的 ng-repeats。
所以下面的

data.test = [{h:1, d:[11,12]}, {h:2, d:[21,22]}];
----------------------
<dummy ng-repeat="a in data.test">
    <h3>{{a.h}}</h3>
    <p ng-repeat="b in a.d">{{b}}</p>
</dummy>

将扩展为

<h3>1</h3>
<p>11</p>
<p>12</p>
<h3>2</h3>
<p>21</p>
<p>22</p>

请注意，我不想成为 div 或任何其他元素中的每个组。

我尝试了以下指令

app.directive('dummy', function () {
    return {
        restrict: 'E',
        replace: true,
        template: ''
    };
});

但是，它似乎保留了dummy 节点。

这可能吗？

【问题讨论】：

标签： javascript html angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

指令ng-repeat-start and ng-repeat-end 可用于此确切目的。

<h3 ng-repeat-start="a in data.test">{{a.h}}</h3>
<p ng-repeat-end ng-repeat="b in a.d">{{b}}</p>

无需虚拟元素/指令，如 in this Plunker 所示。

【讨论】：

但是没有collection-repeat-start/end

【解决方案2】：

在谷歌搜索后，我找到了一篇回答这个问题的博文。它显示了如何group with ng-repeat-start and ng-repeat-end。有一个带有可下载代码的运行示例。如果跳转到最后，可以看到如下代码：

<body ng-controller="TeamListCtrl">
    <div ng-repeat-start="team in teams" class="header">{{team.name}}</div>
    <div ng-repeat="player in team.players" class="item">{{player.firstName}} {{player.lastName}}</div>
    <div ng-repeat-end><br /></div>
</body>

【讨论】：