在angularjs中下载文件时显示下载进度文本答案

【问题标题】：Show download progresstext while file download in angularjs在angularjs中下载文件时显示下载进度文本
【发布时间】：2015-12-04 05:38:58
【问题描述】：

我正在使用 Angularjs 和 Cordova 开发一个应用程序，其中具有从文件列表下载文件的功能，在下载时我会显示进度文本以显示下载状态。

这是我的代码

<div class="card" ng-repeat="result in results">
<button ng-click="downloadVideo(result.file_url)">Download</button>
<!--for showing download status-->
<span ng-show="status">{{progress}}</span>
</div>

在我的控制器中

.controller('VideoCtrl', function($scope,$http) {
   /* get json link of the video files
   $http.get(url).then(function(data){
        $scope.results=data;
      },function(err){
        console.log("Can't connect to server,check connection url");
      });
/*--for downloading videos--*/   
$scope.downloadVideo=function(url){ 

 $scope.progress='20% downloaded';
}

问题是当我点击下载按钮时，所有span 都显示下载进度文本，但我只想显示一个带有进度文本的span，而不是整个跨度。

【问题讨论】：

将按钮和span包装在一个div中并相应地显示信息，即每个视频的信息应单独保存为一个数组。

标签： javascript angularjs cordova

【解决方案1】：

您应该将progress 属性绑定到每个结果，而不是直接将其绑定到scope。喜欢：

<div class="card" ng-repeat="result in results">
<button ng-click="downloadVideo(result)">Download</button>
<!--for showing download status-->
<span ng-show="status">{{result.progress}}</span>
</div>

$scope.downloadVideo=function(result){ 
 url = result.file_url;
result.progress = '20% download';

}

【讨论】：

它的工作，但我想实现另一件事，当点击下载按钮时隐藏按钮并在完成下载显示按钮后显示进度文本。有可能吗？

【解决方案2】：

使用数组存储每个视频的进度，即

/*controller*/
$scope.progress = [] ;

$scope.downloadVideo = function(url, index) {
    $scope.progress[index] = 'some %';
    ...
};

$scope.displayProgress = function(index) {
    if($scope.progress[index] > 0)
        return $scope.progress[index] + ' % downloaded' ;
    else
        return '' ;
};

然后在 HTML 中，

<div class="card" ng-repeat="result in results">
<button ng-click="downloadVideo(result.file_url, $index)">Download</button>
<!--for showing download status-->
<span ng-show="status">{{displayProgress($index)}}</span>
</div>

【讨论】：

【解决方案3】：

HTML 文件：

<script>
    <script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
</script>

<body>
    <button type="button" class="btn btn-lg btn-block btn-primary margin rightmargin "
        ng-click="tableToExcel()">Download Data</button>
</body>

abc.js 文件：

//copy all data of database to excelsheet
$scope.tableToExcel = function () {

    $("#table2Id").table2excel({
        filename: "Table.xls"
    });
}

【讨论】：