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

Posted 2023-03-06

【中文标题】如何执行不复制 ng-repeat 元素的 ng-repeat

【英文标题】：How to do an ng-repeat that doesn't duplicate the ng-repeat element

【发布时间】：2013-04-05 01:50:36

【问题描述】：

我需要使用 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 做到这一点？

【问题讨论】：

不能把ng-repeat放在二级div标签上吗？

【参考方案1】：

简短回答：无法完成。对我个人而言，Angular 的最大缺点之一。

如果指令模板允许多个根元素，您可以使用指令来完成，但这也不起作用。

【参考方案2】：

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

尽管它很丑，你可以通过指令来完成这个，例如：

AngularJS ng-repeat with no html element 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>

【讨论】：

很好的解决方案！ （虽然我希望在未来看到 ng-repeat 指令本身支持它:-)）