Hi,
You can process the data to transform the recursive data in an array and
then just use ng-repeat as you normally would.
Ex.:
itemTree = [{id: 1, name: 'parent', childList: [{id: 2, name: 'child 1'},
{id: 3, name: 'child 2'}] }
itemList = [{id: 1, name: 'parent', level: 1}, {id: 2, name: 'child 1',
level: 2, parentId: 1}, {id: 3, name: 'child 2', level: 2, parentId: 1} ]
On Wednesday, April 29, 2015 at 3:53:07 PM UTC-3, Slava Fomin 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
"AngularJS" 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 http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
