Question

我正在尝试使用AngularJS显示一棵树，并显示每个节点的完整路径。例如，对于以下模型：

...
$scope.data = {
    nodes: [{
        name: "Apple",
        nodes: [{
            name: 'Mac',
            nodes: [{
                name: 'iMac'
            }, {
                name: 'MacBook'
            }]
        }, {
            name: 'iPad'
        }]
    }, {
        name: "Samsung",
        nodes: []
    }]
};
...

我希望输出为：

Apple
Apple/Mac
Apple/Mac/iMac
Apple/Mac/MacBook
Apple/iPad
Samsung

我在网上发现了各种样本，这些样本生成的树没有完整路径，通常使用UL和LI进行缩进输出，而不是完整路径输出。我在http://jsfiddle.net/JtH7C/准备了一个JSFiddle，它遵循这些示例，至少产生：

Apple
Mac
iMac
MacBook
iPad
Samsung

问题是在我的模板中，我无法弄清楚如何引用父节点。当我在模板子节点中时，父节点在范围之外（或者是吗？）

JSFiddle中存在的模板是：

<script type="text/ng-template" id="tree_item_renderer">
    <span>{{data.name}}</span>
    <div ng-repeat="data in data.nodes">
        <div ng-include="'tree_item_renderer'"></div>
    </div>
</script>

我尝试修改如下：

<script type="text/ng-template" id="tree_item_renderer">
    <span>{{$parent.data.name}}</span>
    <span>{{data.name}}</span>
    <div ng-repeat="data in data.nodes">
        <div ng-include="'tree_item_renderer'"></div>
    </div>
</script>

这就产生了：

Apple Apple
Mac Mac
iMac iMac
MacBook MacBook
iPad iPad
Samsung Samsung

最后一个替代方案，也许是简化问题，将取代完整路径，至少产生一个深度。我觉得我可以使用这个深度来导航数组或某些有助于跟踪树中“位置”的东西。例如，输出可能如下所示：

0 Apple
1 Mac
2 iMac
2 MacBook
1 iPad
0 Samsung

非常感谢任何有关完整路径输出或产生深度（或两者兼有！）的帮助。

Answer 1

我能够使用ng-init非常接近。我不确定这是不是一个好主意，因为我的理解是ng-init主要用于测试，但你可以使用它：

http://jsfiddle.net/r3XyT/

<div ng-app="a1">
    <script type="text/ng-template" id="tree_item_renderer">
        <span>{{path}}</span>
        <div  ng-init="path=path+'/'+data.name" ng-repeat="data in data.nodes">
            <div ng-include="'tree_item_renderer'"></div>
        </div>
    </script>
    <div ng-app="a2" ng-controller="ngc">
    <div ng-include="'tree_item_renderer'"></div>
    </div>
</div>

可能更好的想法是编写一个展平函数，在将数据移交给ng-repeat之前调用数据。

angularjs递归树与路径或深度

1 个答案: