AngularJS文件资源管理器

Question

我不确定如何以有棱角的方式做这件事.

我想实现类似于以下的文件浏览器:示例1或示例2

它应该实现的功能是:

• 显示当前目录中的文件和文件夹
• 能够单击文件夹以展开它们(如示例中所示)

所以我现在所拥有的是一个文件和文件夹列表作为路径数组.这是由onDrop或onChange事件(来自拖放或输入)生成的.

关于如何实现这一点的任何建议？

Answer 1

看看@ angular-filemanager

FileNavigator.prototype.buildTree = function(path) {
    var self = this;
    var recursive = function(parent, file, path) {
        var absName = path ? (path + '/' + file.name) : file.name;
        if (parent.name && !path.match(new RegExp('^' + parent.name))) {
            parent.nodes = [];
        }
        if (parent.name !== path) {
            for (var i in parent.nodes) {
                recursive(parent.nodes[i], file, path);
            }
        } else {
            for (var i in parent.nodes) {
                if (parent.nodes[i].name === absName) {
                    return;
                }
            }
            parent.nodes.push({name: absName, nodes: []});
        }
    };

    !self.history.length && self.history.push({name: path, nodes: []});
    for (var i in self.fileList) {
        var file = self.fileList[i].model;
        file.type === 'dir' && recursive(self.history[0], file, path);
    }
};