更新一个进度条上有多个进度条的课程

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

enter image description here

我已经尝试了许多变化，我的代码现在看起来是这样，我正在尝试通过纳克每栏设置唯一的ID， -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：注意$指数是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; dosen't似乎是合法的任何idead如何更新单个进度栏并为jQuery选择器命令生成id？

来源

2013-05-11 ArniReynir

是否使用https://github.com/angular-ui/bootstrap？ – lucuma 2013-05-11 14:56:29

这是在项目中，但暂时不使用它，是否更容易？ – ArniReynir 2013-05-11 17:59:17

这是世界更容易。进度条的角引导指令是您想要使用的。你会接受使用它的答案吗？ – lucuma 2013-05-11 18:02:49

我想在这个例子中，你将得到更好的服务使用ng-class属性，让角使课堂的变化，而不是强迫的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重复和不喜欢这样写道：

<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-12 00:41:48 lucuma

另外还有角引导，也有一个进度条，可能更好地使用角度。 – lucuma 2013-05-12 00:47:18

对不起，迟到了，我在旅行。我用ng-class来解决这个问题。谢谢！ – ArniReynir 2013-05-13 15:42:35

没问题，很高兴解决了。安全的旅行。 – lucuma 2013-05-13 16:00:44

更新一个进度条上有多个进度条的课程

回答

相关问题