[英]How to dynamically name the div in Angularjs?
我正在使用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以使进度在选定的项目行中运行?
非常感谢您的支持,对不起我的英语不好
我希望这是您需要的行为。 您需要将其与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命名,因此它对我有用,而不对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.