如何执行不复制ng-repeat元素的ng-repeat

Question

我需要使用ng-repeat来生成几个元素，但是这些元素不能都包装在一个div中(这是为了框布局的目的，其中框布局只适用于直接的子元素)。例如，我需要以下结果：

<div class='box-layout'>
  <div class='item-header>Head 1</div>
  <div class='item-body>Body 1</div>

  <div class='item-header>Head 2</div>
  <div class='item-body>Body 2</div>
</div>

在重复的部分上没有包装元素。此结构是使用flex-box样式布局所必需的。我怎样才能用AngularJS做到这一点？

Answer 1

正如@Anders Bornholm所说，这是不可能的(仅供参考，in knockout.js this is easy)。

尽管它很难看，但你可以通过一个指令来实现，例如：

1. AngularJS ng-repeat with no html element
2. ng-repeat without HTML element (this time really without any)

JS：

directive('htmlAppend', function() {
    return {
        restrict: 'A',
            link: function(scope, element, attrs) {
                element.append(attrs.htmlRepeat);
        }
    };
})

HTML：

<div class='box-layout'>
  <div class='item-header' ng-repeat="s in sections" html-append="<div class='item-body'>Body</div>">Head</div>
</div>

Answer 2

简而言之:做不到。对我个人来说，Angular最大的缺点之一。

如果指令模板允许多个根元素，那么您可以使用一个指令来实现，但这也不起作用。