How to dynamically name the div in Angularjs?

Question

I'm developing a download function for Android app using Angularjs as in the tutorial: Using the Progress event in PhoneGap file transfers

Everything works just fine, I'm now able to download the files I want, using Web API. However, my problem is: because I'm using ng-repeat in my code. As a result; the progress indicator only run on the first List item, regardless to the song I select.

Here is a screenshot that describes my problem:

I, for example, selected the third song to download, but the indicator just ran on the first song.

This line of code in js has an id named status:

statusDom = document.querySelector("#status");

that refers to an id of my list in HTML code

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

How can I change the div id to make the progress run in the selected line of items?

Very thanks for your supports, and sorry for my bad English

Answer 1

I hope this was the behavior your need. You'll need to mix it with the file.onprogress but this should work.

See it in this plunker

I simply did two step :

1 - I first give the whole object to the "download" function instead of the ID and the name. It allow me more control on that object.

2 - I set a property with the current percentage.

The function :

$scope.download = function(nhac){
  var id = nhac.id;
  var name = nhac.name;
  nhac.status = 0;
  fakeProgress(nhac);
}

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

I made a "fakeProgress" function to simulate a progress. But i guess you can register you .onprogress in the "download" function and update the "nhca.status" property on each "onprogress" event call.

I mean it may look like this :

$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;
  };
}

Hope it helped.

EDIT :

To exactly fit your case use :

  var id = nhac.SongId;
  var name = nhac.SongName;

On the previous function to set the id and the name instead of my exemple. Since i had a different JSON naming it was working for me and not for you.