I'm having a similar problem. I have a list of items, each of which has a
name and one or more "category" objects attached; each category has a name
and zero or more "comment" objects. I need to render this in a table, so I
have this:
<table>
<thead>
<th>Item</th>
<th>Category</th>
<th>Comment</th>
</thead>
<tbody>
<ng-repeat ng-repeat="item in itemList">
<ng-repeat ng-repeat="category in item.categoryList">
<tr ng-repeat="comment in category.commentList">
<td>{{item.name}}</td>
<td>{{category.name}}</td>
<td>{{comment}}</td>
</tr>
</ng-repeat>
</ng-repeat>
</tbody>
</table>
I expect to see something like this:
Item Category Comment
item1 cat1 comment1
item1 cat1 comment2
item1 cat2 comment1
Item2 cat1 comment1
...etc.
This doesn't work; no matter what data is in my list of items, I get an
empty table. I can show the nested ng-repeat outside a table works -- this
works exactly the way I expected:
<ng-repeat ng-repeat="item in itemList">
<ng-repeat ng-repeat="category in item.categoryList">
<p ng-repeat="comment in category.commentList">
{{item.name}} - {{category.name}} - {{comment}}
</p>
...
So it looks like you can't use ng-repeat inside a table structure at all,
although as far as I can see there's no reason why this wouldn't work. (I'd
prefer to use something other than an HTML table, but it's what the client
wants so I'm stuck with it.)
I really need to get this working. I'm using AngularJS 1.5.9 at the moment;
is this something that's been fixed in a later version?
On Wednesday, April 29, 2015 at 12:53:07 PM UTC-6, Slava Fomin II wrote:
>
> Hello!
>
> I've encountered an advanced use-case in my practice that I have problems
> implementing in Angular.js, so I'm in need of assistance.
>
> It is required to render a hierarchical data in a single HTML table.
>
> I've found this Q/A:
> http://stackoverflow.com/questions/11854514/is-it-possible-to-make-a-tree-view-with-angular
>
> and decided to use the offered approach, i.e. to extract repeatable part of
> the table (row) into a separate template and then render it recursively.
>
> The problem is that HTML table has a pretty strict structure (according to
> the standard): table > tbody > tr > td and I can't add elements in the
> middle in order to apply some directives to it.
>
> I've extracted the *<tr>* into a separate template and applied a
> *ngRepeat* to it. In the main template I've applied *ngInclude* to the
> *tbody*. But where do I place a recursive call with additional *ngInclude*
> ?
>
> To work correctly this *ngInclude* should be a sibling of *<tr>*, but I
> can't make it a sibling cause *ngRepeat* is applied to the *<tr>*. So in
> order to make it work I will need another element (parent to both *<tr>*
> and *ngInclude*) to which I will be able to apply *ngRepeat*, but HTML
> standard doesn't provide such an element (there is no element to group rows
> together beside the *tbody* and I don't really want to use it multiple
> times in the table).
>
> Looks like Angular is fighting with HTML in this use-case instead of
> cooperating and extending it.
>
> It would be possible to solve this if *ngRepeat* could be used as a
> separate element like this: *<ng-repeat>*, but it's an *"A"* directive
> only.
>
> Are there any options here I'm not seeing? How should we approach such
> category of problems? Maybe Angular could be improved to address such
> issues?
>
> Thanks!
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
