ng-repeat 中的单个进度条

Question

我是 angularjs 的新手，不知道如何处理每个重复项目中的进度条。我的情况是每个重复项目都有一个按钮，并且伴随着一个进度条。当我单击按钮时，我通过信号器集线器获取进度值。但问题是所有进度条同时更新。

这是我的代码

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

在我的控制器中，我像这样更新 getPercentage

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

我试图在不使用角度引导程序的情况下实现这一目标。任何帮助将不胜感激。

Answer 1

很明显：您需要绑定对象和百分比。

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

我不确定如何将它与后端报告绑定，但您的代码中应该有类似的内容：

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);
}