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

Add a child dynamically within a nested array with Angulajs

本文关键字：数组 一个 动态 Angulajs 嵌套 使用 添加      更新时间：2023-09-26

我在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:[] });

但是现在我想动态地做，只需要给出我想要添加的文件夹的名称。我想我必须迭代hole数组并在名称之后搜索。

但是我怎样才能确定数组中添加文件夹的适当位置呢?

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

非常感谢!

尼科

问题是它是一个嵌套的列表，一个父级类似于它的子级，那么这些子级是它们的子级的父级……

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

如果你喜欢香草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.

我尝试动态设置对象。但目前还没有找到最佳的添加方式。坦率地说，我喜欢你的问题。我试着去找。

/**
 * 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"]);

相关文章：