javascript - 为 AngularJS 中的列分配颜色

Question

出于我的意图，我定义了一个表，其中有一列名为“差异”。 “差异”列包含如下数字:

Difference | ...
    0.02   | (yellow)
    0.01   | (yellow)
    0      | (green)
   -0.06   | (green)
   -0.13   | (green)
    0.06   | (red)
    0.09   | (red)
...

View 代码如下:

<tr ng-repeat="report in repos.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
    <td>{{ report.datum | date:'dd.MM.yyyy' }}</td>
    <td ng-repeat="row in rowOptions" ng-class="row.rowClass">
        {{ report[row.rowTitle] }}
    </td>
</tr>

然后是颜色的 css 定义:

.colGreat { background-color: #11a001; } // ok => <= 0
.colNormal { background-color: #ffd800; } // normal => between 0,01 and 0,03 
.colBad { background-color: #E60014; } // bad =>  >= 0,04

在我的 Ctrl 中，列定义在一个数组中:

$scope.rowOptions = [
      { rowTitle: 'name' },
      { rowTitle: 'produce', rowClass: 'num-right' },
      { rowTitle: 'consume', rowClass: 'num-right' },
      { rowTitle: 'difference', rowClass: 'num-right ' + $scope.getColumnColor }
];

$scope.columnColor = ['colBad', 'colNormal', 'colGreat'];

目前为了测试，我正在定义一个静态解决方案。你怎么能看到整个列都变成了绿色，但我想在行有什么样的数字之后用相应的颜色显示列。

如何定义这种方法？

---

编辑:

我已经尝试过这种方式，但是如果第一个元素有例如 0.01 那么所有行都是黄色的，即使我使用的是 forEach()。

 angular.forEach($scope.repos, function (value) {
       var numDiff = parseFloat(value.Difference, 10);
       diffNumber.push(numDiff);
 });

 angular.forEach(diffNumber, function (val) {
       if (val <= 0.00) {
          return $scope.getColumnColor = 'colGreat';
       }

       if (val >= 0.01 && val <= 0.03) {
          return $scope.getColumnColor = 'colNormal';
       }

       if (val >= 0.04) {
          return $scope.getColumnColor = 'colBad';
       }
 });

Answer 1

刚刚在rowClass json中定义了想要的Json 那是:

{
 'num-right': 1, 
 'colGreat': report[row.rowTitle] <= 0,
 'colNormal': report[row.rowTitle] > 0 && report[row.rowTitle] <= 0.03,
 'colBad': report[row.rowTitle] > 0.04 
}

.并为 ngClass 属性使用表达式语法，以便它使用 ngClass 进行评估

$scope.rowOptions = [
      { rowTitle: 'name' },
      { rowTitle: 'produce', rowClass: 'num-right' },
      { rowTitle: 'consume', rowClass: 'num-right' },
      { rowTitle: 'diff', 
         rowClass: "{'num-right': 1, 'colGreat': report[row.rowTitle] <= 0,'colNormal': report[row.rowTitle] > 0 && report[row.rowTitle] <= 0.03,'colBad': report[row.rowTitle] > 0.04 }"
      }
  ];

并更改这一行:

<td ng-repeat="row in rowOptions" ng-class="row.rowClass">

收件人:

<td ng-repeat="row in rowOptions" ng-class="{{row.rowClass}}">

这是更新的 plunkr