How to do an ng-repeat that doesn't duplicate the ng-repeat element

Question

I need to use ng-repeat to produce several elements but those elements cannot be each wrapped inside a div (this is for box layout purposes where the box layout only works on the immediate children). For example, I need this result:

<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>

There is no wrapping element on the repeated sections. This structure is required to make use of flex-box style layouts. How can I do this with AngularJS?

@TorAndersson, each item produces the two div tags, a header and a body. — edA-qa mort-ora-y, Apr 12 '13 at 15:53

score 4 · Accepted Answer · edited May 23 '17 at 12:12

4

As @Anders Bornholm said, it can't be done (fyi, in knockout.js this is easy).

Albiet its ugly, you can accomplish this via a directive, e.g.:

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>

edited May 23 '17 at 12:12

Community

1
1

answered Apr 13 '13 at 14:50

Chris Montgomery

2,344
2
19
30

Great solution! (although I'd like to see it supported by the ng-repeat directive itself in the future :-) ) – Anders Bornholm Apr 19 '13 at 17:31

score 1 · Answer 2 · answered Apr 13 '13 at 14:27

1

Short answer: can't be done. One of Angular's biggest drawbacks for me personally.

If directive templates would have allowed more than one root element you could have done it with a directive, but that doesn't work either.

answered Apr 13 '13 at 14:27

Anders Bornholm

1,326
7
18

How to do an ng-repeat that doesn't duplicate the ng-repeat element

2 Answers2