javascript - 使用 Angularjs 在嵌套数组中动态添加子项

Question

我有一个 angularjs 数组

$scope.structure =
{
  folders:  [
              { name: 'Folder 1', files: [{ name: 'File 1.jpg' }, { name: 'File 2.png' }], folders:
                      [
                        { name: 'Subfolder 1', files: [{ name: 'Subfile 1.txt' }], folders:[] },
                        { name: 'Subfolder 2', files:[], folders:[] },
                        { name: 'Subfolder 3', files:[], folders:[] }
                    ]},
              { name: 'Folder 2', files:[], folders:[] }
            ],
  files:    [
              { name: 'File 1.gif' },
              { name: 'File 2.gif' }
            ]
};

结构如下:

Root
--Folder 1
----Subfolder 1
------Subfile 1.txt
----Subfolder 2
----Subfolder 3
----File 1.jpg
----File 2.png
--Folder 2
--File 1.gif
--File 2.gif

现在我想在现有文件夹中添加其他文件夹和文件，例如现有文件夹“子文件夹 2”下的文件夹“新文件夹”。

Root
--Folder 1
----Subfolder 1
------Subfile 1.txt
----Subfolder 2
------New Folder
----Subfolder 3
----File 1.jpg
----File 2.png
--Folder 2
--File 1.gif
--File 2.gif

我可以使用以下函数手动完成此操作:

$scope.structure.folders[0].folders[1].folders.push({ name: 'New Folder', files:[], folders:[] });

但现在我想动态地执行此操作，只需提供我要添加的文件夹的名称即可。我想我必须迭代孔数组并搜索名称。

但是我如何识别数组中的适当位置来添加文件夹？

如果有人能帮助我，那就太好了!

非常感谢!

妮可

Answer 1

问题在于，它是一个嵌套列表，并且其中一个父级与其子级相似，那么这些子级就是其子级的父级......这可能会很深入。

我建议这个库:https://github.com/wix/angular-tree-control

如果您喜欢 Vanilla JS，您可以编写一个递归函数，它会迭代文件夹中的文件夹并执行您需要的任何操作:) 这是一个展示一些递归的快速示例。

https://jsfiddle.net/su42vb56/1/

var tree = {
    name: 'A', 
    folders: [
        {
            name: 'B',
            folders: []
        },
        {
            name: 'C',
            folders: []
        }
    ]
};

function findFolder(folder, name) {
    var i;
    var match;

    if(folder.name === name) {
        return folder;
    } else {
        for(i = 0; i < folder.folders.length; i++) {
            match = findFolder(folder.folders[i], name);
            if(match) {
                return folder.folders[i];
            }
        }
    }
}

findFolder(tree, 'C').folders.push({name: 'newFolder', folders: []});
console.log(tree); // There is a newFolder under C.