I did try that -- I got an Angular exception (something about a potential infinite loop, if I remember correctly). I should point out that my example is a simplification of the real page; in the real thing there are controls to select the items to be included in the top-level list, so the list can change dynamically. I think this was causing some recursion in event handlers, or something like that.
In any case, I'd rather avoid a messy workaround if I can. As I understand it, there's no reason why the ng-repeat tag shouldn't work inside a table so long as it doesn't generate any HTML tags that are invalid inside <tbody> tags. It really should just replicate the markup enclosed in the <ng-repeat>, I thought, but using the Chrome Developer Tools to inspect the page shows that it's generating nothing other than a <!-- ng-repeat .... --> comment inside the <tbody>. I didn't see anything in the documentation to suggest that ng-repeat can't be used inside a table, which to me implies that this is a bug. On Sat, Mar 11, 2017 at 3:21 PM, Guilherme Meireles <[email protected]> wrote: > I recommend you try to flatten your structure to create a row list. > > Try something like this: > > var flattedList = itemList.reduce((state, item) => { > return state.concat(item.categoryList.reduce((nestedState, category) > => { > var flattedState = category.commentList.map(comment => ({ > item, > category, > comment, > })); > return nestedState.concat(flattedState) > }, [])); > }, []); > > //flattedList: {item,category,comment}[] > > <table> > <thead> > <th>Item</th> > <th>Category</th> > <th>Comment</th> > </thead> > <tbody> > <tr ng-repeat="flatItem in flattedList"> > <td>{{ flatItem.item.name }}</td> > <td>{{ flatItem.category.name }}</td> > <td>{{ flatItem.comment }}</td> > </tr> > </tbody> > </table> > > On Saturday, March 11, 2017 at 2:38:47 PM UTC-3, Pete Ford wrote: >> >> 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/quest >>> ions/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. > -- 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.
