使用 AngularJS 预先上传的 Sort/GroupBy 文件答案

【问题标题】：Sort/GroupBy files pre-uploaded using AngularJS使用 AngularJS 预先上传的 Sort/GroupBy 文件
【发布时间】：2015-11-06 02:37:35
【问题描述】：

我想在通过扩展名上传之前对我的文件进行分组（扩展名不能在上传信息定义的mime类型属性中定义。所以我使用了groupBy定义的angular-filter和而是使用函数将属性（例如“file.name”）放入过滤器 Im 以获取扩展名。所以我希望我的预加载文件如下所示：

扩展 1：

file3.Extension1

file1.Extension1

扩展 2：

file4.Extension2

file2.Extension2

这是我的EXAMPLE

也是我的代码：

  <ul>
    <li ng-repeat="f in files | groupBy: fileExtension" style="font:smaller">
        {{f.name}}
    </li>
</ul>

$scope.fileExtension = function(file) {
    return file.name.split('.').pop();
};

欢迎提出任何建议！

【问题讨论】：

标签： javascript angularjs group-by angular-file-upload

【解决方案1】：

我会将您的文件名列表转换为 ngController 或服务内的文件组列表。绑定到这个转换后的集合在视图中变得微不足道。

$scope.groups = groupByExt(filenames);

function groupByExt(filenames) {
    var extensions = [];
    var groups = [];
    angular.forEach(filenames, function(item) {
        var extension = item.substring(item.lastIndexOf(".")+1);
        if (!extensions[extension]) {
            var group = { name: extension, files: [] };
            extensions[extension] = group;
            groups.push(group);

            group.files.push({ name: item });
        }
        else {
            var group = extensions[extension];
            group.files.push({ name: item});
        }
    });
    return groups;
}

HTML

<ul>
    <li ng-repeat="group in groups">
        {{ group.name }}
        <ul>
            <li ng-repeat="file in group.files">
                {{ file.name }}
            </li>
        </ul>
    </li>
</ul>

Demo

您还可以设置 $watchers 以便在原始文件名列表更改时更新文件组：

$scope.$watchCollection('filenames', function(newVal, oldVal)    {
  if(newVal !== oldVal) {
      $scope.groups = groupByExt(newVal);
  }
});

Demo

我会避免使用过滤器，因为过滤器不应更改底层项目的引用（无限摘要问题）

【讨论】：

你能解释更多或者给我一个例子吗？