AngularJS: show and update a progress bar for each element of a ng-repeat

Question

I'm a beginner with AngularJS and I hope someone helps me with this code, because I don't know how to do it.

This is the situation: on my project, I receive several objects in an array from the server side (Node.js with express) and I show the information with a ng-repeat. So, imagine that each object is a scan and each scan has a progress bar. When you clic to run that scan, a progress bar is showed to indicate the progress.

What I don't know to do, is to show a progress bar for each object and to update each progress bar.

Perhaps I didn't explain correctly what I want to do, but I'm sure you're going to understand with this example on Plunker: http://plnkr.co/edit/ejLKKIZpGr53jWra8VVj?p=preview

I wrote I receive the information from the server, because I can't use a new field to control the progress bar. For example: http://plnkr.co/edit/YqwhR4Z4YssCXxmmrlX4?p=preview But I don't want to do on this way.

As you can see, if you clic on a button, all progress bars are showed. For example, for the object with id "2", how to show only its progress bar? How could I change the text "25% left", for example?

Thank in advance for your help.

Daniel.

Answer 1

Showing/Hiding the Bar

You might add an additional array which holds the "hide_bar" property for the respective item in the data array. Downside of this approach is the necessity of keeping these arrays in sync.

On the other hand adding another property for each item in the data array might not be an issue, unless you send the array back to the server and can't gracefully ignore the new property when saving or similar. If you receive the data directly from the server, the property "hide_bar" is missing/undefined, which is a falsy value. ng-show will hide the progress bar. Clicking the button and executing hide_bar = !hide_bar changes the value to true and the bar will be shown.

Take a look: http://plnkr.co/edit/ChC29smkhXyjuvQ9PZLF?p=preview

Initially the items in the variable's array do not have a property "showProgress".

Changing the percentage

It depends on where the data for the scan progress comes from. I guess it comes from the server and is a property in the variable array entries. Changing the progressbar then is simple like

<span>{{ 100 - data.progress }}% left</span >

The same way the style of the progress bar divs may be changed using ngStyle directive and small helper function that turns a percentage value into an object like {width: '75%'}.

Answer 2

I have made something up from your plunkr,

http://plnkr.co/edit/YqwhR4Z4YssCXxmmrlX4?p=preview