javascript - 在 AngularJS 中下载文件时显示下载进度文本

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 中

.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 属性绑定(bind)到每个结果，而不是直接将其放在 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';

}