为 AngularJS 中的列分配颜色

Question

为了我的意图，我定义了一个 table，他有一个名为 "Difference" 的列。 "Difference" 列包含如下数字：

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

视图代码如下：

<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

Answer 2

使用函数检索 class 而不是将其保存在对象中的简化动态版本。注意 getClass(value) 函数而不是在对象中携带 class 引用。

  <table>
    <tr ng-repeat="report in reports">
      <td>{{ report.datum | date:'dd.MM.yyyy' }}</td>
      <td ng-class="getClass(report.value)">{{ report.value }}</td>
      <!--<td ng-class="getClass(report.value)">&nbsp;</td>-->
    </tr>
  </table>

以及判断cssclass属于什么值的函数：

 $scope.getClass = function(val) {
    if(val <= 0) {
      return 'colGreat';
    } else if(val <= 0.03) {
      return 'colNormal';
    } else {
      return 'colBad';
    }
}

可以找到完整的示例 here。

Answer 3

你可以试试 ng-if:

<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">
        <div ng-if="difference <= 0" class="colGreat">{{report[row.rowTitle]}}</div>
        <div ng-if="difference > 0 && difference <= 0.03" class="colNormal">{{report[row.rowTitle]}}</div>
        <div ng-if="difference > 0.03" class="colBad">{{report[row.rowTitle]}}</div>
    </td>
</tr>

通常，唯一会出现的 div 是用您想要的 class 填充条件的 div。我希望它能帮助你。随时通知我。

Answer 4

@Yuro,

我不知道你将如何重用它，但结合你的和@skubski JS 和 html 代码。

将您的 JSON 更改为

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

和你的 JS 函数：

$scope.getClass = function(existingClass, val, evaluate) {
    if(!evaluate) 
      return existingClass;

    if(val <= 0) {
      existingClass = existingClass + ' colGreat'; //Or use the concat function
    } else if(val <= 0.03) {
      existingClass = existingClass + ' colNormal'; //Or use the concat function
    } else {
      existingClass = existingClass + ' colBad'; //Or use the concat function
    }
    return existingClass
}

和您的 html 文件到：

<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="getClass(row.rowClass, report.value, row.evaluate)">
        {{ report[row.rowTitle] }}
    </td>
</tr>

为 AngularJS 中的列分配颜色

Assign colors to column in AngularJS

javascript

css

html-table

angularjs

angularjs-controller