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

我正在使用angular和bootstrap制作一个进度条。目前它运行良好，正确显示进度值。现在，我希望根据名为progress的属性的值，使用进度条

types=”“

。我尝试从UI引导和其他一些堆栈溢出示例中实现代码，但我遗漏了一些东西

有人能帮忙吗？谢谢你抽出时间

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;
      };

table.controller（'workingPlan'，函数（$scope，$localStorage）{
$scope.$storage=$localStorage.$default({
“待办事项”：[
{“文本”：“开始工作”，“进展”：10}，
{“文本”：“工作中”，“进度”：50}，
{“文本”：“午餐刹车”，“进度”：70}，
{“文本”：“已完成工作”，“进度”：100}
]   
});
$scope.changeType=函数（todo）{
var类型；
如果（待办事项进度<30）{
类型=‘成功’；
}否则如果（todo.progress<60）{
类型='info'；
}否则如果（todo.progress<90）{
类型='警告'；
}否则{
类型=‘危险’；
}
$scope.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>

使用ng类
//编辑计划中缺少的待办事项>

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


{{todo.progress}}%使用ng类
//编辑计划中缺少的待办事项>

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


{{todo.progress}}%您还可以使用
progress
值来确定色调

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

此代码将使用0%-100%显示颜色
hsl（0100%，50%）
（红色）到
hsl（120100%，50%）
（绿色）。超过100%将使其变为蓝色

您还可以使用
进度
值来确定色调

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

此代码将使用0%-100%显示颜色
hsl（0100%，50%）
（红色）到
hsl（120100%，50%）
（绿色）。超过100%将使其变为蓝色

请注意，您声明了changeType函数，但没有在任何地方运行它：）请注意，您声明了changeType函数，但您没有在任何地方运行它：）我相信这应该会起作用，但我的所有进度条都是蓝色的。我会在一分钟内将我的项目放入plunker。创建一个plunkr，可能有一个输入错误我创建了一个plunker AlainIb。您在plunkr中放入了太多的代码，很难理解。类型总是nullyo每个todo都应该有一个类型我认为这应该有效，但我的所有进度条都是蓝色的。我会在一分钟内将我的项目放入plunker。创建一个plunkr，可能有一个类型我创建了一个plunker AlainIb。你在plunkr中放了太多代码，很难理解。类型总是空的。你应该有一个p类型er todo不仅仅是所有范围中的一个