0

我在更新引导进度条上的课程时遇到问题。

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

在此处输入图像描述

我尝试了很多变体，我的代码现在看起来像这样，我试图通过 ng-repeat (AngularJS) 在每个栏上设置唯一的 ID。

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 是从 0 生成数字的 angularjs 语法...？

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

4

1 回答 1

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
于 2013-05-12T00:41:48.190 回答