热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Angularjs中动态命名div?-HowtodynamicallynamethedivinAngularjs?

ImdevelopingadownloadfunctionforAndroidappusingAngularjsasinthetutorial:UsingthePro

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

我正在使用Angularjs为Android应用程序开发下载功能,如教程:在PhoneGap文件传输中使用Progress事件

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.

一切正常,我现在可以使用Web API下载我想要的文件。但是,我的问题是:因为我在我的代码中使用ng-repeat。结果是;无论我选择的歌曲如何,进度指示器仅在第一个List项目上运行。

Here is a screenshot that describes my problem: 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:

js中的这行代码有一个名为status的id:

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

that refers to an id of my list in HTML code

这是指HTML代码中我的列表的ID


      
    

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

如何更改div id以使选定的项目行中的进度运行?

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

非常感谢你的支持,对不起我的英语不好

1 个解决方案

#1


1  

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

我希望这是你需要的行为。你需要将它与file.onprogress混合,但这应该有效。

See it in this plunker

在这个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.

1 - 我首先将整个对象赋予“下载”功能,而不是ID和名称。它允许我更多地控制该对象。

2 - I set a property with the current percentage.

2 - 我用当前百分比设置了一个属性。

The function :

功能 :

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

The ng-repeat :

ng-repeat:

    
      

{{nhac.SongName}}

{{nhac.Singer}}

Downloading : {{nhac.status}}%

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.

我制作了一个“fakeProgress”函数来模拟进度。但我想你可以在“下载”功能中注册.onprogress,并在每个“onprogress”事件调用中更新“nhca.status”属性。

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.

在上一个函数中设置id和名称而不是我的例子。因为我有一个不同的JSON命名,它对我而言并不适合你。


推荐阅读
author-avatar
手机用户2502859523
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有