My goal is to update the content of a progress bar for each row in a table using ng-init within ng-repeat. Here is my code snippet:
The code snippet for the view section is as follows:
<tr ng-repeat-start="p in projetsListe" ng-init={{progressBar($index)}}>
<td>
<button class="btn btn-info btn-sm" ng-click="p.expanded = !p.expanded" expand data-toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
<span ng-bind="p.expanded ? '-' : '+'"></span>
</button>
</td>
<td>{{p.NomProjet}}</td>
<td>{{p.Responsable}}</td>
<td>{{trestant[$index]}}</td>
<td><div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="40" id="pg1" aria-valuemin="0" aria-valuemax="100"><label id="l1"></label>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" id="pg2" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<label style="font-size :10px"><i class="fa fa-circle" style ="color : #df6d69"></i> Temps Passé : {{tpasse[$index]}}h</label>
   
<label style="font-size :10px"><i class="fa fa-circle" style ="color : green"></i> Temps Prévu : {{tprev[$index]}}h</label>
</td>
</tr>
Below is the function code snippet:
$scope.progressBar= function(i){
var tpa;
var p1 = document.getElementById('pg1');
var p2 = document.getElementById('pg2');
var l1 = document.getElementById('l1');
tpa = ($scope.tpasse[i]*100)/$scope.tprev[i];
if(tpa<=100){
p1.style.width = tpa + '%';
p2.style.width = 100-tpa + '%';
l1.innerHTML = " ";
}
else{
p1.style.width = '100' +'%';
l1.innerHTML = "Attention : Temps prévu dépassé !";
}
};
Currently, the data of the last row in the table is displaying in the first row instead of the intended row:
https://i.sstatic.net/lDMQv.png
The result should actually show up in the second row, which is currently empty, while the first row should display a different outcome. Any ideas on how to resolve this issue?
For a visual representation of this issue, you can check out this plunker link: https://plnkr.co/edit/nGxqMOPejKMINb89Ewwx?p=preview