在單個進度條中顯示下載多個文件的進度

Question

我正在爲Android平臺構建一個離子應用程序。我正在使用cordova的FileTransfer插件來下載文件。我可以下載多個文件，但無法爲所有併發下載顯示單個進度欄。

在單個進度條中顯示多個文件進度的正確方法是什麼？下面是我的參考功能代碼：

功能通過在循環中調用一個單一的文件下載功能

$scope.downloadSongs = function() { 
      angular.forEach($scope.album, function (song) { 
       if (song.checked) { 
        $scope.downloadSong(song); 
       } 
      }); 
     }; 

功能來下載文件

$scope.downloadSong = function (song) { 
       $scope.downloads = $scope.downloads + 1; 
       console.log("Downloads - " + $scope.downloads); 
       var url = decodeURI(song.link); 
       console.log(url); 
       var filename = song.name + ".mp3"; 
       var folder = song.folder; 
       var targetPath = cordova.file.externalRootDirectory + "musicbox/" + folder + "/" + filename; 
       $cordovaFileTransfer.download(url, targetPath) 
        .then(function (entry) { 
         cordova.plugins.notification.local.schedule({ 
          title: "Download Complete", 
          message: song.name 
         }); 
        }, function (error) { 
         alert(JSON.stringify(error)); 
        }, function (progress) { 
         $timeout(function() { 
          $scope.downloadProgress = (progress.loaded/progress.total) * 100; 
         }) 
        }); 
      }; 

下載多個文件

Answer 1

解決的方法是在視圖中傳遞歌曲ID

<li ng-repeat="song in songsList"> 
<progress id="{{song.id}}" max="100" value=""></progress> 
</li> 

比控制器

function(progress){ 
document.getElementById(song.id).value(Math.ceil((progress.loaded/progress.total)*100)); 
}