如何根據值更改進度欄顏色？

我正在使用angular和bootstrap製作進度條。它現在正常工作，它正確顯示了進度值。現在我希望我的進度條使用types=" "，具體取決於我稱爲進度的屬性的值。我嘗試從UI Bootstrap和其他一些堆棧溢出示例實現代碼，但我錯過了一些東西。如何根據值更改進度欄顏色？

任何人都可以幫忙嗎？謝謝你的時間。

的script.js

table.controller('workingPlan', function ($scope, $localStorage) { 
    $scope.$storage = $localStorage.$default({ 
     "todos":[ 
      { "text":"starting work", "progress":10}, 
      { "text":"middle of work","progress":50}, 
      { "text":"lunch brake", "progress":70}, 
      { "text":"finished working", "progress":100} 
     ] 
    }); 

     $scope.changeType = function(todo) { 
     var type; 
     if (todo.progress < 30) { 
      type = 'success'; 
     } else if (todo.progress < 60) { 
      type = 'info'; 
     } else if (todo.progress < 90) { 
      type = 'warning'; 
     } else { 
      type = 'danger'; 
     } 

     $scope.type = type; 
     };

的index.html

<tr ng-repeat="todo in plan>  
    <td><progressbar animate="false" value="todo.progress" type="{{todo.type}}"><b>{{todo.progress}}% </b></progressbar></t 
</tr>

來源

2015-12-21 John Onslaught

請注意，你聲明一changeType功能，但你不要在任何地方運行它:) –

使用納克級 //編輯失蹤「後，」待辦事項的計劃>

<tr ng-repeat="todo in plan">  
    <td><progressbar animate="false" value="todo.progress" type="{{todo.type}}" 
    ng-class="{ 'progress-bar-success' : todo.type == 'succes' , 'progress-bar-info': todo.type == 'info', 'progress-bar-warning' : todo.type == 'warning' , 'progress-bar-danger': todo.type == 'danger'}" > 
    <b>{{todo.progress}}% </b></progressbar></t 
</tr>

來源

2015-12-21 13:13:58 AlainIb

我相信這應該工作，但是我得到的所有進度條藍色。我會在一分鐘內把我的項目放在沉睡中。 –

創建一個plunkr，也許有一個錯字 – AlainIb

我創建了一個笨蛋AlainIb。 –

你也可以使用Progress值來確定色調

ng-style="{'color':'hsl('+1.2*todo.progress+',100%,50%)'}"

這個代碼將使用0％-100％以顯示顏色hsl(0,100%,50%)（紅）到hsl(120,100%,50%)（綠色）。超過100％會導致藍色。

plunker

來源

2015-12-21 13:21:10 AntiHeadshot

如何根據值更改進度欄顏色？

回答

相關問題