Question

我已经编写了这个HTML来以树格式显示我的数据，但它没有按预期工作。这是什么问题。

我知道我可以使用自定义指令来做到这一点，但我只是希望它以非常基本的格式显示。同时为此编写指令将非常棘手。

<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>

我要显示的树结构如下

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

提前致谢。

Answer 1

非常确定Angular知道正确的复数。（firstChild - ＆gt; firstChildren，如果没有尝试firstChilds）。它也需要在一张桌子里。

<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>

或者不在表格中。

<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>

让我知道这是否足够，或者你是否希望我制作一个Plunker或其他东西。

Answer 2

也许这是一个愚蠢的建议，但为什么不根据孩子的水平使用CSS text-indent？ tr中tr的整个想法似乎过于复杂且难以维护

无法使用AngularJS中的嵌套ng-repeat以树格式显示数据

2 个答案: