javascript - 递归 ng-repeat 获取当前数组的长度

Question

看看这个 fiddle http://jsfiddle.net/uXbn6/4619/

这里我使用了递归模板来打印我的数据。 我想要的是只有当相应的数组长度大于 1 时才打印“Hi”文本。

这里对于第一个数组“tree”，由于长度大于 1，应该打印 Hi。现在，当在 data.nodes 上重复循环时，在 child 中，由于 data.nodes 的长度为 1 或小于 1，因此不应打印“Hi”。

简而言之，我希望在这个例子中得到这样的输出

firstParenNode Hi
node1.1
secondParenNode Hi

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

 </script>

<div ng-app="myApp" ng-controller="TreeController">
    <div ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></div>
</div>


angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.tree = [{
        name: "firstParenNode", 
        nodes: [{
            name: "node1.1",
            nodes: []
        }]
    }, {
        name: "secondParenNode",
        nodes: []
    }];
}]);

任何帮助将不胜感激。

Answer 1

尝试一下:

<script type="text/ng-template"  id="tree_item_renderer.html">
    <div> {{node.name}} 
        <span ng-show="node.nodes.length > 0"> Hi </span>
    </div>
    <div ng-repeat="node in node.nodes" ng-inlude="'tree_item_renderer.html'"></div>
</script>

<div ng-app="myApp" ng-controller="TreeController">
    <div ng-repeat="data in tree">
        <div> {{data.name}}
            <span ng-show="tree.length > 1"> Hi </span>
        </div>
        <div ng-repeat="node in data.nodes" ng-include="'tree_item_renderer.html'"></div>
    </div>
</div>

在我的 fiddle 上查看: http://jsfiddle.net/uXbn6/4622/