1

我正在尝试使用 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

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

4

1 回答 1

3

我能够使用 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 之前调用该函数。

于 2013-06-27T21:00:05.170 回答