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

see if you can create a plnkr so others will be able to help more easlily — Nitsan Baleli
– Nitsan Baleli, Commented Sep 10, 2015 at 8:53

Imab Asghar · Accepted Answer · 2015-09-11 05:23:32Z

2

Just defined the desired Json in the rowClass json That was:

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

. And use expression syntax for the ngClass attribute so it evaluates with the 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 }"
      }
  ];

and change this line:

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

TO:

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

Here is an updated plunkr

edited Sep 11, 2015 at 5:23

answered Sep 10, 2015 at 9:10

Imab Asghar

3161 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

skubski Over a year ago

I tried to go into the Map-Syntax direction as you suggested but it leaves me with a prototypal inheritence problem: the rowOptions has no reference to the report object you're trying to access because it is in the same scope as the repos array. You're expecting the options to behave as a child in the report iteration (new scope per ng-repeat). I'm curious as how you will solve this! +1 if you do! :-)

yuro Over a year ago

@skubski I've edited my post above.. I had tried with the forEach method to check every value and give them the color then. But it seemed that the forEach method check only the first item in the array and then colored the entire column with the same color.

skubski Over a year ago

That's because in the forEach you're assigning a different value to just only one object, the last css-class will be used as result. @yuro.

skubski Over a year ago

Keep that value for every field. P.S. You can use the row.rowClass like this too. What is the problem with this solution?

Imab Asghar Over a year ago

Thank you for the challenge @skubski. Here is the plunkr. plnkr.co/edit/QLCJInuUAflKi2tjhCLG?p=preview

|

Imab Asghar · Accepted Answer · 2015-09-14 07:19:58Z

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>

answered Sep 14, 2015 at 7:19

Imab Asghar

3161 silver badge7 bronze badges

1 Comment

yuro Over a year ago

Thanksss It works fine! :) ... Could you help me in this topic -> stackoverflow.com/questions/32548886/…

skubski · Accepted Answer · 2015-09-10 09:13:29Z

0

A simplified dynamic version that uses a function to retrieve the class, instead of saving it in the object. Notice the getClass(value) function instead of carrying the class reference in your object.

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

And the function that determines which css class belongs to what value:

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

Complete example can be found here.

answered Sep 10, 2015 at 9:13

skubski

1,6162 gold badges21 silver badges27 bronze badges

6 Comments

Imab Asghar Over a year ago

But what about other columns? maybe in the getClass function you can include classes for other columns as well?

skubski Over a year ago

You can easily extend the function to return more classes, which should be preferred over adding redundant repetitive data in your json , which in reality already carries the correct information in its value.

yuro Over a year ago

@skubski How would you define this in my ngRepeat? Because yours is a bit simpler then my example. <td ng-repeat="row in rowOptions" ng-class="row.rowClass"> {{ report[row.rowTitle] }} </td>

skubski Over a year ago

Updated my plunker to reflect your example and datastructure.

yuro Over a year ago

@skubski here is a prepared plunkr. plnkr.co/edit/AQZgR0dDuyffKla2Nood?p=preview

|

JonathanTheBrosh · Accepted Answer · 2015-09-10 09:18:49Z

0

You can try with 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>

Normally , the only div that will appear is the div that filled the condition with the class you want. I hope it 'll help you. Keep me informed.

answered Sep 10, 2015 at 9:18

JonathanTheBrosh

2083 silver badges14 bronze badges

Collectives™ on Stack Overflow

Assign colors to column in AngularJS

4 Answers 4

11 Comments

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related