Ways to dynamically assign a name to a div using AngularJS

Question

Ways to dynamically assign a name to a div using AngularJS

Currently, I am in the process of developing a download function for an Android app using Angularjs based on this tutorial: Utilizing the Progress event in PhoneGap file transfers

Everything seems to be working efficiently as planned; I can successfully download the desired files using Web API. However, I have encountered an issue related to my use of ng-repeat in the code. The problem arises when the progress indicator runs only on the first item in the list, irrespective of the song selected.

To better illustrate the situation, here is a screenshot showcasing the issue: https://i.stack.imgur.com/rfz44.png

For instance, I attempted to download the third song, but the indicator displayed progress for the first song in the list.

The particular line of code in JavaScript that presents an issue involves the id 'status':

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

This id corresponds to an element within my HTML list:

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

I am seeking guidance on how to modify the div id so that the progress indicator can accurately reflect the selected song during the download process.

I appreciate your assistance and understanding despite any language barriers.

javascript android angularjs cordova

Answer 1

Answer №1

I trust that this behavior aligns with your requirements. You should incorporate it with the file.onprogress for optimal functionality.

Check out the demonstration on this plunker

I approached this in two steps:

1 - I passed the entire object to the "download" function instead of just the ID and the name, providing more control over the object.

2 - I included a property for tracking 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 created a "fakeProgress" function to simulate progress. However, you can integrate your .onprogress within the "download" function and update the "nhca.status" property during each "onprogress" event trigger.

You could implement it like this :

$scope.download = function(nhac){
  var id = nhac.id;
  var name = nhac.name;
  nhac.status = 0;
  //function to initiate transfer and obtain the "fileTransfer" object.
  fileTransfer.onprogress = function(progressEvent) {
      nhac.status = progressEvent.loaded / progressEvent.total;
  };
}

Hope this elucidates the process.

EDIT :

To tailor-fit it to your specific scenario, use :

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

In the previous function for setting the id and name, as my example may not directly apply due to different JSON naming conventions.

Answer 2

I trust that this behavior aligns with your requirements. You should incorporate it with the file.onprogress for optimal functionality.

Check out the demonstration on this plunker

I approached this in two steps:

1 - I passed the entire object to the "download" function instead of just the ID and the name, providing more control over the object.

2 - I included a property for tracking 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 created a "fakeProgress" function to simulate progress. However, you can integrate your .onprogress within the "download" function and update the "nhca.status" property during each "onprogress" event trigger.

You could implement it like this :

$scope.download = function(nhac){
  var id = nhac.id;
  var name = nhac.name;
  nhac.status = 0;
  //function to initiate transfer and obtain the "fileTransfer" object.
  fileTransfer.onprogress = function(progressEvent) {
      nhac.status = progressEvent.loaded / progressEvent.total;
  };
}

Hope this elucidates the process.

EDIT :

To tailor-fit it to your specific scenario, use :

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

In the previous function for setting the id and name, as my example may not directly apply due to different JSON naming conventions.

Ways to dynamically assign a name to a div using AngularJS

Answer №1

Similar questions

Dynamically loading an iFrame source and automatically populating input forms using Javascript explained

Text element in SVG not displaying title tooltip

The typography text exceeds the boundaries of the Material-UI CardContent

Developing Modules in NodeJS using Constructors or Object Literals

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

What is the process for accessing someone's birthday information using the Facebook API?

Whenever I execute the 'ng serve' command, I encounter an issue with ineffective mark-compacts close to the heap limit, resulting in an allocation failure and a JavaScript

Make sure the auto import feature in TypeScript Visual Studio Code Editor is set to always use the ".js" extension

How to use JQuery to automatically scroll to the bottom of a

Discover the final index of an array with Angular's ng-repeat functionality

How can I use HTML and jQuery to send a button click event to a .py file using AJAX and cgi in web development?

Identify whether the application is built with nextJS, react, or react-native

Sending the object context back to the controller callback from an AngularJS Directive

Having trouble displaying child nodes in MatTreeView with Angular 14?

The data from the server is inaccessible to node.js

Transferring Parameters to EJS Template in Node.js

Generate arrays with custom names by parsing JSON data

Navigate through a series of div elements using Jquery

Optimizing File Transfers and Streaming Using Next.js and CDN Integration

An issue occurred with player.markers not being recognized as a function when trying to utilize videojs markers