Assign colors to column in AngularJS

Question

For my intention I've defined a table who has a column called "Difference". The column "Difference" contains numbers like so:

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

As follows is the code of the 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>

Then the css definition for the colors:

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

In my Ctrl the columns are defined in an array:

$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'];

Currently for testing I'm defining a static solution. How you can see the entire column is getting the color green, but I want to display the column with the corresponding colors each after what kind of number the row has.

How can I define this approach?

---

EDIT:

I've tried on this way but if the first item has for example 0.01 then all rows are yellow, even though I'm using 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

@Yuro,

I dont know how you will be reusing this but combining yours and @skubski JS and html code.

Change your JSON to

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

and your JS function to:

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

and your html file to:

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