使用AngularJS預先上傳的Sort/GroupBy文件

Question

我想在將文件分組之前通過擴展名進行上傳（擴展名不能在上傳信息定義的MIME類型屬性中定義，所以我使用groupBy定義。角過濾器，而是使用一個函數來獲取擴展到把一個屬性（「file.name」爲例）的過濾IM 所以我想我的預加載的文件似乎是這樣的：

• Extension1：

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(); 
}; 

任何建議表示讚賞！

Answer 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

您還可以設置$觀察家這樣，當原來的文件名列表的變化，它會更新文件組：

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

Demo

我會避免過濾器，因爲過濾器不應該改變基礎項目的參考（無限摘要問題）