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

Question

我正在使用 Angular 和 Bootstrap 制作进度条。目前它工作正常，它可以正确显示进度值。现在我希望我的进度栏使用 types="" ，具体取决于我称为进度的属性的值。我尝试实现 UI Bootstrap 和其他一些堆栈溢出示例中的代码，但我遗漏了一些东西。

有人可以帮忙吗？感谢您抽出时间。

脚本.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>

Answer 1

使用 ng 类 //编辑计划中缺少的“after”todo >

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