Question

在我的Angular应用程序中，我使用AngularTree指令（http://wix.github.io/angular-tree-control）来呈现以下数据结构的树视图：

$scope.subjectAreas = [
        {
            name:   "Area-1",
            link:   "dashboards.dashboard_1",
            entities: [
                {
                    name: "entity 1"
                },
                {
                    name: "entity 2"
                }
            ]
        },
        {
            name:   "Area-2",
            link:   "dashboards.dashboard_1",
            entities: [
                {
                    name: "entity 3"
                }
            ]
        },
        {
            name:   "Area-3",
            link:   "dashboards.dashboard_1",
            entities: [
                {
                    name: "entity 4"
                },
                {
                    name: "entity 5"
                },
                {
                    name: "entity 6"
                }
            ]
        }
    ];

这个treeView指令提供了＆＃34; createSubTree＆＃34;功能，我使用如下：

function createSubTree(level, width, prefix) {
        if (level > 0) {
            var res = [];
            for (var i=1; i <= width; i++)
                res.push({ "label" : getName(i), "id" : "id"+prefix + i, "i": i,
                    "children": createSubTree(level-1, setNumberOfChildren(getName(i),i), prefix + i +".")});
            return res;
        }
        else
            return [];
    }

以下是我的支持功能：

function countNumberOfEntities(index){

        return $scope.subjectAreas[index].entities.length;
    }

    function getSubjectAreasLength(){
        return $scope.subjectAreas.length;
    }

    function setNumberOfChildren(subjectArea, index){
        var numberOfChildEntities = countNumberOfEntities(index-1);
        return numberOfChildEntities;
    }

    function getName(index){
        if($scope.subjectAreas[index-1]){
            var subjectAreaName = $scope.subjectAreas[index-1].name;
            var n = subjectAreaName;
            return subjectAreaName;
        }
    }

树视图渲染正常，但所有子节点（实体的名称，属于给定的SubjectArea）最终都与其父节点（SubjectArea）具有相同的名称。

当前渲染如下所示：

Area-1
   Area-1
   Area-2
Area-2
   Area-1
Area-3
   Area-1
   Area-2
   Area-3

这需要看起来像是：

Area-1
   Entity-1
   Entity-2
Area-2
   Entity-3
Area-3
   Entity-4
   Entity-5
   Entity-6

如何修改此＆＃34; createSubTree＆＃34;函数返回每个实体的名称，在这里递归调用它："children": createSubTree(level-1, setNumberOfChildren(getName(i),i), prefix + i +".")});

Answer 1

将您的代码更改为：

function createSubTree(ary) {
    var res = [];
    if (ary) {
        res = ary.map(function(v, k) {
            var id = k + 1;
            return {
                i: id,
                id: 'id' + id,
                label: v.name,
                children: createSubTree(v.entities)
            }
        });

    }
    return res;
}



$scope.treedata = createSubTree($scope.subjectAreas);

尽量避免在递归方法中发送索引等。有时您可以帮助但不发送索引，但在这种情况下，您可以发送主数组并以每个元素的子数组递归调用相同的运行。

如何正确使用递归函数调用来返回嵌套对象的属性？

1 个答案: