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

问题在于它是一个嵌套列表，一个父母与其子女相似，那么这些孩子就是孩子的父母......这可能会非常深刻。

我建议使用这个lib：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.

Answer 2

我尝试动态设置对象。但我现在无法找到最佳添加方式。坦率地说，我喜欢你的问题。我试着找。

＆＃13;

/**
 * Created by sherali on 8/30/15.
 */
var Helper = {
        isEmpty: function (obj) {
            return !obj || obj === null || obj === undefined || Array.isArray(obj) && obj.length === 0;
        },
        clearArray: function (arr) {
            if (arr && Array.isArray(arr)) {
                arr.length = 0;
            }
        },
        pushArray: function (arr1, arr2) {
            if (arr1 && arr2 && Array.isArray(arr1)) {
                arr1.push.apply(arr1, Array.isArray(arr2) ? arr2 : [arr2]);
            }
        },
        setArray: function (arr1, arr2) {
            this.clearArray(arr1);
            this.pushArray(arr1, arr2);
        }
    };
    
    function FileOrFolder(name, folderArray, fileArray, format, isFile, size) {
        var _name,
            _folders = [],
            _files = [],
            _size = 0,
            _format = null,
            _isFile = false,
            _json = {};
        var self = this;
        Object.defineProperties(this, {
            name: {
                get: function () {
                    return _name;
                },
                set: function (val) {
                    _name = val;
                },
                enumerable: true
            },
            folders: {
                get: function () {
                    return _folders;
                },
                set: function (val) {
                    Helper.setArray(_folders, val);
                },
                enumerable: true
            },
            files: {
                get: function () {
                    return _files;
                },
                set: function (val) {
                    Helper.setArray(_files, val);
                },
                enumerable: true
            },
            size: {
                get: function () {
                    return _size;
                },
                set: function (val) {
                    _size = Helper.isEmpty(val) ? 0 : val;
                },
                enumerable: true
            },
            format: {
                get: function () {
                    return _format;
                },
                set: function (val) {
                    _format = val;
                },
                enumerable: true
            },
            isFile: {
                get: function () {
                    return _isFile;
                },
                set: function (val) {
                    _isFile = val;
                },
                enumerable: true
            },
            json: {
                get: function () {
                    return _json;
                },
                set: function (val) {
                    _json = val;
                },
                enumerable: true
            }
        });
        this.addFileOrFolder = function (item, isFile) {
            Object.keys(item.json).forEach(function (key, i, obj) {
                if (isFile) {
                    Helper.pushArray(_files, item);
                    _json[name].files[key] = item.json[key];
                } else {
                    Helper.pushArray(_folders, item);
                    _json[name].folders[key] = item.json[key];
                }
            });
        };
        if (!Helper.isEmpty(name)) {
            this.name = name;
            _json[name] = {folders: {}, files: {}, size: 0, format: undefined};
    
            if (!Helper.isEmpty(folderArray)) {
                this.folders = folderArray;
                _folders.forEach(function (item, index, array) {
                    Object.keys(item.json).forEach(function (key, i, obj) {
                        _json[name].folders[key] = item.json[key];
                    });
                });
            }
            if (!Helper.isEmpty(fileArray)) {
                this.files = fileArray;
                _files.forEach(function (item, index, array) {
                    Object.keys(item.json).forEach(function (key, i, obj) {
                        _json[name].files[key] = item.json[key];
                    });
                });
            }
            this.size = size;
            _json[name]["size"] = _size;
    
            if (isFile) {
                this.isFile = isFile;
            }
            _json[name]["isFile"] = _isFile;
            this.format = format;
            _json[name]["format"] = _format;
        }
    }
    
    
    var root = new FileOrFolder("root",
        [
            new FileOrFolder("Folder1", [
                new FileOrFolder("folder1.1", [
                    new FileOrFolder("folder1.1.1", [
                        new FileOrFolder("folder1.1.1.1")
                    ])
                ]),
                new FileOrFolder("folder1.2", [
                    new FileOrFolder("folder1.2.1", [
                        new FileOrFolder("folder1.2.1.1")
                    ])
                ])
            ]),
            new FileOrFolder("Folder2", [new FileOrFolder("folder2.1")], [new FileOrFolder("file", null, null, ".bat", true)])
        ]);
    
    root.addFileOrFolder(new FileOrFolder("Folder3", null, [
        new FileOrFolder("file3.1", null, null, ".txt", true),
        new FileOrFolder("file3.2", null, null, ".txt", true),
        new FileOrFolder("file3.3", null, null, ".txt", true)
    ]));
    console.log("files of root : ", root.folders[0].folders);
    console.log("folder 1.1", root.json.root.folders["Folder1"].folders["folder1.1"]);

＆＃13;

使用Angulajs在嵌套数组中动态添加子项

2 个答案: