Not able to display data in tree format using nested ng-repeat in AngularJS

Question

I have written this HTML to display my data in tree format, but its not working as expected. What is the issue here.

I know I can use custom directive to do that, but I just want it to show in very basic format. Also writing directive for this will be very tricky.

<div data-ng-cloak data-ng-show="rootNode.children.totalAvailable > 0">
    <table border=1>
        <tr>
            <th>Tree Form</th>
        </tr>


        <tr data-ng-repeat="parent in rootNode.children.items">
            <tr>
                <td>
                    {{parent.displayName}}
                </td>
            </tr>

            <tr data-ng-repeat="firstChild in parent.children.items">
                <tr>
                    <td>
                        {{firstChild.displayName}}
                    </td>
                </tr>
                <tr data-ng-repeat="secondChild in firstChild.children.items">
                    <tr>
                        <td>
                            {{secondChild.displayName}}
                        </td>
                    </tr>
                </tr> 
            </tr>       
        </tr>
    </table>
</div>

Tree structure I want to display is as follows

Parent 1
    Child 1.0
        SecondChild 1.0.1
        SecondChild 1.0.2
        SecondChild 1.0.3
    Child 1.1
        SecondChild 1.1.1
        SecondChild 1.1.2
        SecondChild 1.1.3

Parent 2
    Child 2.0
        SecondChild 2.0.1
        SecondChild 2.0.2
        SecondChild 2.0.3
    Child 2.1
        SecondChild 2.1.1
        SecondChild 2.1.2
        SecondChild 2.1.3

Thanks in advance.

Klarence · Accepted Answer · 2015-08-06 18:35:27Z

Pretty sure that Angular knows the correct pluralization. (firstChild -> firstChildren, if not try firstChilds). Also does it need to be in a table.

<div data-ng-cloak data-ng-model="items" data-ng-show="rootNode.children.totalAvailable > 0">
    <table border=1>
        <tr>
            <th>Tree Form</th>
        </tr>
        <tr data-ng-repeat="parent in items">
            <tr>
                <td>
                    {{parent.displayName}}
                </td>
            </tr>
            <tr data-ng-repeat="firstChild in parent.firstChildren">
                <tr>
                    <td>
                        {{firstChild.displayName}}
                    </td>
                </tr>
                <tr data-ng-repeat="secondChild in firstChild.secondChildren">
                    <tr>
                        <td>
                            {{secondChild.displayName}}
                        </td>
                    </tr>
                </tr>
            </tr>
        </tr>
    </table>
</div>

Or not in a table.

<div data-ng-cloak data-ng-controller="NameController" data-ng-show="rootNode.children.totalAvailable > 0">
    <ol data-ng-model="items">
        <li data-ng-repeat="parent in items">
            <span data-ng-bind="parent.displayName"></span>
            <ol>
                <li data-ng-repeat="firstChild in parent.firstChildren">
                    <span data-ng-bind="firstChild.displayName"></span>
                    <ol>
                        <li data-ng-repeat="secondChild in firstChild.secondChildren">
                            <span data-ng-bind="secondChild.displayName"></span>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</div>

Let me know if this is enough or if you want me to make a Plunker or something.

maurycy · Accepted Answer · 2014-06-27 09:14:37Z

0

Maybe this is a silly suggestion but why don't you use a CSS text-indent depending on child level? The whole idea of tr in tr seems to be overcomplicated and poorly maintainable

answered Jun 27, 2014 at 9:14

maurycy

8,4201 gold badge30 silver badges44 bronze badges

4 Comments

IfOnly Over a year ago

Main issue here is I am not able to use ng-repeat in nested fashion

maurycy Over a year ago

your ng-repeats looks fine, but the output html will be invalid

IfOnly Over a year ago

Why my HTML will be invalid. Please be specific. Is there any way to achieve this.

maurycy Over a year ago

for a starter as far as i remember valid elements in tr are td and th

Collectives™ on Stack Overflow

Not able to display data in tree format using nested ng-repeat in AngularJS

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related