在单个进度条中显示进度以下载多个文件

时间:2016-01-13 13:41:08

标签: javascript angularjs algorithm file cordova

我正在为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;
                        })
                    });
            };

1 个答案:

答案 0 :(得分:0)

解决方案是在视图中传递歌曲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));
}