Smooth switch between colors dynamically

Question

I am using ng-class to color a particular cell based on the value of the cell.

ng-class="{'score-cell green': value >= 70 ,                                                
'score-cell red': value <= 40,                                                
'score-cell yellow': value < 70 && value > 40}"

How can I switch between ranges something like this?

it should gradually transition from red to yellow to green.

Please advice.

Please find this plunkr here.

https://plnkr.co/edit/0EjxhxxvzWpFRF49Pzp5?p=preview

You can use CSS transition: `.score-cell { transition: background-color 2s; }` — Rikin, Apr 12 '18 at 14:33

score 1 · Answer 1 · answered Apr 12 '18 at 14:47

1

Try using ng-style instead. Firstly you need to generate your values within the range of green and red (HSV colour space). Then turn it into Hex values and add it with background-color CSS. You can render them in a loop with ng-repeat.

Here is an example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // your function for converting to Hex
  function toHex(n) {
    var r = 255 - (n / 10 * 255 | 0);
    g = n / 10 * 255 | 0;
    return '#' +
      (r ? (r = r.toString(16), r.length == 2 ? r : '0' + r) : '00') +
      (g ? (g = g.toString(16), g.length == 2 ? g : '0' + g) : '00') + '00'
  }

  var c = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  $scope.colors = c.map(function(x) {
    return toHex(x)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="c in colors track by $index" ng-style="{'background-color':c}">
    background-color: {{c}}
  </div>
</div>

answered Apr 12 '18 at 14:47

Aleksey Solovey

4,153
3
15
34

I created the pallette using your technique but it doesnt show any value now.
{{value}}
– arunmmanoharan Apr 12 '18 at 15:07
@a2441918 you are rendering `{{value}}` but your elements (from `ng-repeat`) are named as `color`, so switch it to `{{color}}` instead – Aleksey Solovey Apr 12 '18 at 15:10
But the value is coming from an API. Based on the value, the cell in a table should have a specific color. Is this the same? It doesnt render anything – arunmmanoharan Apr 12 '18 at 15:14
So I need to compare the value to the index of the element in the array and put that color as the background color – arunmmanoharan Apr 12 '18 at 15:15
https://plnkr.co/edit/0EjxhxxvzWpFRF49Pzp5?p=preview Could you check this out please? – arunmmanoharan Apr 12 '18 at 15:18
That worked. Thanks. Any way to define a yellow color and switch from red to yellow and yellow to green? I have the values set in the top. – arunmmanoharan Apr 12 '18 at 18:59
@a2441918 find RGB to HSV conversion in JavaScript and adopt current code (turning into Hex once again) – Aleksey Solovey Apr 12 '18 at 21:08

Smooth switch between colors dynamically

1 Answers1