为AngularJS中的列分配颜色答案

【问题标题】：Assign colors to column in AngularJS为AngularJS中的列分配颜色
【发布时间】：2015-12-06 11:05:09
【问题描述】：

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

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

【问题讨论】：

看看您是否可以创建一个 plnkr，以便其他人能够更轻松地提供帮助
你的意思是this？
我会把它作为答案发布。

标签： javascript angularjs css html-table angularjs-controller

【解决方案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

【讨论】：

我尝试按照您的建议进入 Map-Syntax 方向，但它给我留下了原型继承问题：rowOptions 没有引用您尝试访问的报告对象，因为它位于与 repos 数组相同的范围。您期望选项在报告迭代中表现为子项（每个 ng-repeat 的新范围）。我很好奇你将如何解决这个问题！ +1，如果你这样做！ :-)
@skubski 我在上面编辑了我的帖子。我曾尝试使用 forEach 方法检查每个值并给它们颜色。但似乎 forEach 方法只检查数组中的第一项，然后用相同的颜色为整个列着色。
那是因为在 forEach 中您只为一个对象分配了不同的值，最后一个 css 类将用作结果。 @yuro。
为每个字段保留该值。附言您可以像 too 一样使用 row.rowClass。这个解决方案有什么问题？
感谢@skubski 的挑战。这是plunkr。 plnkr.co/edit/QLCJInuUAflKi2tjhCLG?p=preview

【解决方案2】：

@尤罗，

我不知道你将如何重用它，但结合你的和@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>

【讨论】：

谢谢它工作正常！ :) ...你能帮我解决这个问题吗 -> stackoverflow.com/questions/32548886/…

【解决方案3】：

一个简化的动态版本，它使用函数来检索类，而不是将其保存在对象中。请注意 getClass(value) 函数，而不是在您的对象中携带类引用。

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

以及判断哪个css类属于什么值的函数：

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

完整的例子可以在here找到。

【讨论】：

但是其他列呢？也许在 getClass 函数中，您也可以包含其他列的类？
您可以轻松地扩展该函数以返回更多类，这比在您的 json 中添加冗余重复数据更可取，实际上它的值中已经包含正确的信息。
@skubski 您如何在我的 ngRepeat 中定义它？因为你的比我的例子简单一些。 <td ng-repeat="row in rowOptions" ng-class="row.rowClass"> {{ report[row.rowTitle] }} </td>
更新了我的 plunker 以反映您的示例和数据结构。
@skubski 这里是一个准备好的 plunkr。 plnkr.co/edit/AQZgR0dDuyffKla2Nood?p=preview

【解决方案4】：

你可以试试 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 是用您想要的类填充条件的 div。我希望它会帮助你。随时通知我。

【讨论】：