在一个进度条上更新类，其中有多个进度条

Question

我在bootstrap进度条上更新类时遇到了问题。

我在一个页面上有多个进度条，我想只在一个时候更新一个类，如果它超过例如20％。从“进步 - 成功”到“进步 - 进步 - 危险”

我尝试了很多变化，我的代码现在看起来就像我正在尝试设置唯一ID ng-repeat（AngularJS）的每个栏。

Javascript：

$scope.result = ProjectServices.projects().get(function(d) {
$scope.tasktime = []
  console.log($scope.result.Tasks);
  var tasks = $scope.result.Tasks;

  for(var i = 0; i < tasks.length; i++) {
    var prosent = ( tasks[i].EstimatedTimeLeft / tasks[i].EstimatedTime ) * 100;
    console.log(prosent);
    var extra = '#bar' + i;
    if(prosent > 20 ) {
      $(extra).removeClass("progress progress-success");
      $(extra).addClass("progress progress-danger");

    }
    $scope.tasktime.push(prosent);
  }

HTML：注意$ index是angularjs语法，用于生成0 ...？

中的数字

 <div id="bar{{$index}}" class="progress progress-success">
    <div  class="bar" style="width:{{tasktime[$index] | number:2}}%">{{tasktime[$index] | number:1}}% </div>
  </div>

但它看起来似乎拿起了元素，因为我知道它会进入if语句。

我的额外变量var extra = '#bar' + i;似乎不是合法的，如何更新单个进度条并为jQuery选择器命令生成id？

Answer 1

我认为在这个例子中你最好使用ng-class属性，让angular更改类而不是强制jquery进入你的控制器，这通常是你不想做的：

http://docs.angularjs.org/api/ng.directive:ngClass

<div id="bar{{$index}}" class="progress " ng-class='{"progress-success":tasktime[$index].prosent<=20,"progress-danger":tasktime[$index].prosent>20}'>
    <div  class="bar" style="width:{{tasktime[$index] | number:2}}%">{{tasktime[$index] | number:1}}% </div>
  </div>

快速说明我意识到prosent没有定义，但你可以在控制器中轻松定义一个函数：

$scope.prosent = function(item) {
  return ( item.EstimatedTimeLeft / item.EstimatedTime ) * 100
}

html将是：ng-class='{"progress-success":prosent(item)或prosent(tasktime[$index]，具体取决于您的转发器/等。

最后，似乎您可能还没有共享所有代码..我会设置一个ng-repeat，并按照以下方式执行：

<div ng-repeat='task in tasktime' class='progress' ng-class='{"progress-success":task.prosent<=20,"progress-danger: task.prosent>20'>
  <div  class="bar" style="width:{{task | number:2}}%">{{task | number:1}}% </div>
etc