javascript - 在单个进度条中显示下载多个文件的进度

Question

我正在为 Android 平台构建一个 ionic 应用程序。我正在使用 cordova 的 FileTransfer 插件下载文件。我可以下载多个文件，但无法为所有并发下载显示单个进度条。

在单个进度条中显示多个文件进度的正确方法是什么？下面是我的功能代码供引用:

Function to download multiple files by calling a single file download function in loop

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

Function to download a file

$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

解决方案是在 View 中传递歌曲id

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

比在 Controller 中

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