如何在Angularjs中動態命名div？

Question

我正在使用Angularjs開發Android應用程序的下載功能，如本教程中所述： 在PhoneGap文件傳輸中使用Progress事件

一切正常，我現在可以使用Web API下載所需的文件。 但是，我的問題是：因為我在代碼中使用了ng-repeat 。 結果是; 進度指示器僅在第一個“列表”項上運行，而與我選擇的歌曲無關。

這是描述我的問題的屏幕截圖：

例如，我選擇了要下載的第三首歌曲，但是指示器僅在第一首歌曲上運行。

js中的這一行代碼具有一個名為status的ID：

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

在HTML代碼中引用我的列表的ID

<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 ID以使進度在選定的項目行中運行？

非常感謝您的支持，對不起我的英語不好

Answer 1

我希望這是您需要的行為。 您需要將其與file.onprogress混合使用，但這應該可行。

看到這個矮人

我只做了兩步：

1-我首先將整個對象分配給“下載”功能，而不是ID和名稱。 它使我可以對該對象進行更多控制。

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並在每個“ onprogress”事件調用上更新“ nhca.status”屬性。

我的意思是看起來像這樣：

$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命名，因此它對我有用，而不對你有用。