更新一個進度條上有多個進度條的課程

我在單個頁面上有多個進度條，我想只在當時更新一個類，例如，如果它超過例如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

更新一個進度條上有多個進度條的課程

回答

相關問題