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

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

The removeClass method does not affect the class attribute when using $(this).attr('class'), but only when using $(this).attr('id')

How can you apply a class to a different element by hovering over one element?

"Encountered an unexpected token when using an object parameter in a React function

React component will automatically rerender if the cache is disabled in the Chrome browser

Revamp MUI class names with React Material UI's innovative randomization and elimination

Retrieve information from Django and pass it to the Vue template

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

Scale up the font size for all text on the website uniformly

There seems to be an issue with the visibility of the b-button within the b-table component in

Creating a character jump animation on an HTML5 canvas

What is the process of invoking an external JavaScript function in Angular 5?

Creating an Image slideShow with only one Image - making it slide on itself

"How to dynamically fill a text input field from a table using jQuery when a specific value is selected, potentially involving multiple rows (possibly

Check for a rapid return if the function ends up returning null in JavaScript

Modify visibility or enable state of a text box according to a checkbox in PHP

Accessing multi-dimensional array properties in PHP with JavaScript integration

A guide on using Jest.js to test labels within Vue 3 Quasar components by utilizing a forEach loop

Due to high activity on the main thread, a delay of xxx ms occurred in processing the 'wheel' input event

Cover the entire screen with numerous DIV elements