如何根据值更改进度栏颜色？

我正在使用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

如何根据值更改进度栏颜色？

回答

相关问题