ng-repeat without an element

[jonp...@gmail.com]

I've seen several threads about this but none that seemed to really answer the question (or at least matched my scenario).  First here is my model:

[ {groupName: "Group 1",

  [{name: "Item 1"}, {name: "Item 2"}]},

{groupName: "Group 2",

  [{name: "Item 3"}, {name: "Item 4"}]}

]

And the html I need to generate is something like this:

<ul  data-role="listview">

<li>Group 1</li>

<li>Item 1</li>

<li>Item 2</li>

<li>Group 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

If you noticed the data-role="listview" then you will see this is for a jQuery Mobile app.  What I need to be able to do is have a nested loop with the outer loop not creating any elements.  I've tried putting an ng-repeat on a div for the outer loop to handle the group names but jQuery Mobile will not render the list view correctly with the divs in there.  Any ideas how to make this work?

Thanks...

[Pawel Kozlowski]

Hi!

There is this nice PR in the queue:
https://github.com/angular/angular.js/pull/1646
which will make it possible to express a repeater as a comment so you
will be able to use ng-repeat without a need for a container element.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[jonp...@gmail.com]

I'll take a look at this but I would rather not have to patch angular if I don't have to. Plus, there was a lot of discussion on that PR so I don't know if it's ready to use or not.  May try it though.  Any other suggestions?

[Pawel Kozlowski]

Hi!

On Wed, Jan 9, 2013 at 11:26 PM, <jonp...@gmail.com> wrote:
> I'll take a look at this but I would rather not have to patch angular if I
> don't have to. Plus, there was a lot of discussion on that PR so I don't
> know if it's ready to use or not. May try it though. Any other
> suggestions?

This PR is from the AngularJS project lead so there is high
probability that it is going to be merged. But yeh, this is not
supported out of the box right now.

I'm not sure if I've got any work-around ideas...

Cheers,
Pawel

[Dave Merrill]

I haven't tried this, but could the top level repeat be on a fake element, say <noop>? The browser would ignore it, but it would also ignore any content inside it, and I'd need to fiddle with it to see if you could get it to render both the opening and closing tags, then the inner repeating content. Just a thought...

Dave

[jonp...@gmail.com]

No, that doesn't work either.  That essentially does the same as using a <div> to wrap the <li> group.  jQuery Mobile seems to want the <li> items to be directly below the <ul>, otherwise it does not style them.  I have tried putting the repeat on the <ul> and then having a <ul> per group.  This works fairly well although jQuery Mobile puts the group header <li> (which is setup as a  data-role="list-divider") a few pixels on top of the previous <li> in the previous group.  This should be fixable with some CSS so this may be my best solution at the moment.  If anyone thinks of something better though please let me know.

Thanks...

[Dave Merrill]

This is kind of Fred Flintstone, but if it's really true, as your example indicates, that groups and items render identically, maybe the easiest thing to do is to preprocess the data to flatten it into a single level array. If there are differences between groups and items, then the array would need to hold objects like this [{type: 'group', name: 'Group 1'}, {type: 'item', name: 'Item 1'}], instead of being an array of name strings. In an ideal world, maybe you could get the server to return that format in the first place.

In any case, at that point, rendering is just an ng-repeat over the array.

Make sense? It's not great to futz w the data for the sake of rendering, but doable is good too (:-).

Dave

[jonp...@gmail.com]

Ok, I wrapped the multiple <ul> groups in a <div> with a class of grouplist attached and added this CSS and all is well now.  Still a little screwy and would like a better solution but it will work for now.

.grouplist ul:not(:first-child) {

margin-top: 15px !important;