Individual progressbar in ng-repeat

Question

I am new to angularjs and am not sure how to handle progressbar within each repeated item. My situation is that I've a button for each repeated item and a progress bar accompanying it. When I click the button, I get the progress value through a signalr hub. But the problem is all the progress bars update simultaneously.

Here is my code

<div class="col-md-3" data-ng-repeat="o in objects">
  <h5>{{o.name}}</h5>
  <div class="progress progress-striped active">
   <div ng-style="{width : ( getPercentage + '%' ) }" aria-valuemax="100" aria-valuemin="0" aria-valuenow="{{getPercentage}}" role="progressbar" class="progress-bar">

   </div>
  </div>
 <button class="btn btn-primary" type="button" data-ng-click="someWork()">ClickMe</button>
</div>

And in my controller I update getPercentage like so

this.proxy.client.updateProgress = (value) => {
            $scope.$apply($scope.getPercentage = value);
}

I was trying to achieve this without using angular bootstrap. Any help would be most appreciated.

Answer 1

It's obvious: you need to bind objects and percentages.

In HTML:

<div class="col-md-3" data-ng-repeat="o in objects">
  <h5>{{o.name}}</h5>
  <div class="progress progress-striped active">
   <div ng-style="{width : ( o._percentage + '%' ) }" aria-valuemax="100" aria-valuemin="0" aria-valuenow="{{o._percentage}}" role="progressbar" class="progress-bar">

   </div>
  </div>
 <button class="btn btn-primary" type="button" data-ng-click="someWork()">ClickMe</button>
</div>

I'm not sure how you can bind it with backends reports, but something like that should be in your code:

this.proxy.client.updateProgress = (value) => {
            // I don't know how to bind event with related_object, you should know
            $scope.$apply($scope.objects[related_object]._percentage = value);
}