热门标签 | 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命名,它对我而言并不适合你。


推荐阅读
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • EasyMock实战指南
    本文介绍了如何使用EasyMock进行单元测试,特别是当测试对象的合作者依赖于外部资源或尚未实现时。通过具体的示例,展示了EasyMock在模拟对象行为方面的强大功能。 ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • matlab gamma函数_MATLAB做晶体结构图(固体物理)
    写在前面最近在复习考研复试《固体物理》这一门课,去年学的内容已经忘干净了,所以就翻开前几页。突然看到了面心立方和体心立方结构图,想到了去年 ... [详细]
  • MySQL锁机制详解
    本文深入探讨了MySQL中的锁机制,包括表级锁、行级锁以及元数据锁,通过实例详细解释了各种锁的工作原理及其应用场景。同时,文章还介绍了如何通过锁来优化数据库性能,避免常见的并发问题。 ... [详细]
  • 本文探讨了在QT框架中如何有效遍历文件内容,并解决了一个常见的错误,即文件内容读取为空时弹窗无法正常显示的问题。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • python开发mysql:单表查询&多表查询
    一单表查询,以下是表内容二多表查询,一下是表内容三总结&表创建过程单 ... [详细]
  • 本文介绍了一个优化过的JavaScript函数,用于从API获取电影信息并渲染到网页上,同时注册Service Worker以提升用户体验和性能。 ... [详细]
  • 本文详细介绍了如何在现有的Android Studio项目中集成JNI(Java Native Interface),包括下载必要的NDK和构建工具,配置CMakeLists.txt文件,以及编写和调用JNI函数的具体步骤。 ... [详细]
  • 本文详细介绍了如何在Android应用中使用GridView组件以网格形式展示数据(如文本和图像)。通过行列布局,实现类似矩阵的数据展示效果。 ... [详细]
  • Ubuntu GamePack:专为游戏爱好者打造的Linux发行版
    随着Linux系统在游戏领域的应用越来越广泛,许多Linux用户开始寻求在自己的系统上畅玩游戏的方法。UALinux,一家致力于推广GNU/Linux使用的乌克兰公司,推出了基于Ubuntu 16.04的Ubuntu GamePack,旨在为Linux用户提供一个游戏友好型的操作环境。 ... [详细]
  • 本文探讨了如何利用System.Diagnostics.Trace作为.NET库中的通用日志记录方法,同时考虑了其在性能关键代码中的影响。 ... [详细]
  • 本文详细介绍如何在IntelliJ IDEA 14中打包Android应用APK文件,并提供查询SHA1值的具体步骤。 ... [详细]
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社区 版权所有