3

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

4

2 回答 2

4

正如@Anders Bornholm 所说,它无法完成(仅供参考,在knockout.js 中这很容易)。

尽管它很丑,但您可以通过指令来完成此操作,例如:

  1. AngularJS ng-repeat 没有 html 元素
  2. ng-repeat 没有 HTML 元素(这次真的没有)

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>
于 2013-04-13T14:50:33.483 回答
1

简短的回答:做不到。对我个人而言,Angular 的最大缺点之一。

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

于 2013-04-13T14:27:50.297 回答