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

ng-repeat中的单个进度条

1 个答案: