Как динамически назвать div в Angularjs?

0

Я разрабатываю функцию загрузки для Android-приложения, используя Angularjs, как в учебнике: использование события Progress в передаче файлов PhoneGap

Все работает отлично, теперь я могу загрузить файлы, которые я хочу, используя веб-API. Однако моя проблема в том, что я использую ng-repeat в своем коде. В результате; индикатор прогресса запускается только в первом элементе списка, независимо от выбранной мной песни.

Вот скриншот, который описывает мою проблему: Изображение 174551

Я, например, выбрал третью песню для загрузки, но индикатор только что побежал на первой песне.

Эта строка кода в 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, чтобы сделать ход выполнения в выбранной строке элементов?

Очень спасибо за поддержку, и извините за мой плохой английский

  • 0
    Что вы используете для отображения статуса?
  • 0
    этот ты имел ввиду? <div id = "status"> </ div> status - это строка "X% загружено" на снимке экрана. Вы можете легко найти это в коде HTML
Показать ещё 2 комментария
Теги:
cordova

1 ответ

1

Надеюсь, это было вашим поведением. Вам нужно будет смешать его с файлом. Прогресс, но это должно сработать.

Смотрите это в этом 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, это работало для меня, а не для вас.

  • 0
    Это не работает для меня @Okazari. Я думаю, что собираюсь потратить немного больше времени, работая над этим. Я отвечу вам, как только добьюсь успеха
  • 0
    Он отлично работает @ Бен. Я видел на поршень.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню