Я разрабатываю функцию загрузки для Android-приложения, используя Angularjs, как в учебнике: использование события Progress в передаче файлов PhoneGap
Все работает отлично, теперь я могу загрузить файлы, которые я хочу, используя веб-API. Однако моя проблема в том, что я использую ng-repeat в своем коде. В результате; индикатор прогресса запускается только в первом элементе списка, независимо от выбранной мной песни.
Вот скриншот, который описывает мою проблему:
Я, например, выбрал третью песню для загрузки, но индикатор только что побежал на первой песне.
Эта строка кода в js имеет статус id с именем:
statusDom = document.querySelector("#status");
это относится к идентификатору моего списка в HTML-коде
<ion-list>
<div class="list" >
<a ng-repeat="nhac in songs" class="item item-thumbnail-left">
<h2>{{nhac.SongName}}</h2>
<p>{{nhac.Singer}}</p>
<button id="startDl" ng-click="download(nhac.SongId, nhac.SongName)">Download the Song</button>
<div id="status"></div>
</a>
</div>
</ion-list>
Как я могу изменить идентификатор div, чтобы сделать ход выполнения в выбранной строке элементов?
Очень спасибо за поддержку, и извините за мой плохой английский
Надеюсь, это было вашим поведением. Вам нужно будет смешать его с файлом. Прогресс, но это должно сработать.
Смотрите это в этом plunker
Я просто сделал два шага:
1 - Сначала я передаю весь объект функции "загрузить" вместо идентификатора и имени. Это позволяет мне больше контролировать этот объект.
2 - Я установил свойство с текущим процентом.
Функция:
$scope.download = function(nhac){
var id = nhac.id;
var name = nhac.name;
nhac.status = 0;
fakeProgress(nhac);
}
Ng-repeat:
<a ng-repeat="nhac in songs" class="item item-thumbnail-left">
<h2>{{nhac.SongName}}</h2>
<p>{{nhac.Singer}}</p>
<button ng-show="!nhac.status" ng-click="download(nhac)">Download the Song</button>
<div ng-show="nhac.status">Downloading : {{nhac.status}}%</div>
</a>
Я создал функцию "fakeProgress" для имитации прогресса. Но я думаю, вы можете зарегистрировать вас .onprogress
в функции "загрузить" и обновить свойство "nhca.status" при каждом вызове события "onprogress".
Я имею в виду, что это может выглядеть так:
$scope.download = function(nhac){
var id = nhac.id;
var name = nhac.name;
nhac.status = 0;
//you function to start the transfer and get the "fileTransfer" object.
fileTransfer.onprogress = function(progressEvent) {
nhac.status = progressEvent.loaded / progressEvent.total;
};
}
Надеюсь, это помогло.
РЕДАКТИРОВАТЬ:
Чтобы точно соответствовать вашему делу, используйте:
var id = nhac.SongId;
var name = nhac.SongName;
На предыдущей функции установить id и имя вместо моего примера. Поскольку у меня было другое имя JSON, это работало для меня, а не для вас.