Question

我正在使用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，其中包含进度文本而不是整个范围。

Answer 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';

}

Answer 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>

Answer 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"
    });
}

在angularjs中下载文件时显示下载progresstext

3 个答案: