0

I've got a reading that comes in every few seconds.

Currently I'm using thresholds to determine when the animation should take place:

<div ng-class="{'circle1': speed < 10, 'circle2': speed < 13 && speed >= 15, 'circle3': speed >= 15}"></div>

Speed is already updating automatically but at the moment the css style only changes when is goes above 13 and then 15 etc. Instead I want it to dynamically change as the speed changes. So 13.1 produces a larger circle than 13 and 13.2 is larger than 13.1 etc.

circle1 {
    border-radius: 100px;
    height: 80px;
    width: 80px;
    left: 128px;
    position: relative;
    background: green;
}

is the css for circle1. I'd like it to continuously transition from say green to yellow based on speed.

tryingtolearn
  • 2,528
  • 7
  • 26
  • 45

3 Answers3

0

You can define you're speed in you're controller

$scope.speed

and try to affect you're duration to this variable.

For change the style dynamically try to define the style in you're markup :

<div class='circle' style='width:{{speed}}px;'></div>
Alexis
  • 5,681
  • 1
  • 27
  • 44
  • Hmm, I'm not sure I understand. Speed is already updating automatically but at the moment the css style only changes when is goes above 13 and then 15 etc. Instead I want it to dynamically change as the speed changes. So 13.1 produces a larger circle than 13 and 13.2 is larger than 13.1 etc. – tryingtolearn Aug 12 '15 at 12:37
  • Oh ok, define the style in u're markup and apply 'style=width:{{speed}}px;' – Alexis Aug 12 '15 at 13:32
  • Sorry, could you provide an example? I'm not quite sure what you mean. – tryingtolearn Aug 12 '15 at 13:32
0

You should put your speed variable on your controller's scope so that whenever speed will change, angular will revaluate the expression and apply the appropriate class. As Alexis said, use

$scope.speed

and class based on expression will be applied.

ashfaq.p
  • 5,379
  • 21
  • 35
  • Hmm, I'm not sure I understand. Speed is already updating automatically but at the moment the css style only changes when is goes above 13 and then 15 etc. Instead I want it to dynamically change as the speed changes. So 13.1 produces a larger circle than 13 and 13.2 is larger than 13.1 etc. – tryingtolearn Aug 12 '15 at 12:37
0

How about something like this?

$scope.getSpeedClass = function() {
  var klass;
  if (speed <= 15) klass = 3;
  if (speed < 13) klass = 2;
  if (speed < 10) klass = 1;

  return klass;
}

<div class="circle{{getSpeedClass()}}"></div>
casraf
  • 21,085
  • 9
  • 56
  • 91
  • Yeah, I'm currently doing something similar. However, it still means I need to write the css for all individual "klass"es Is there anyway that I can have a continuous transition on circle colour based on the speed? – tryingtolearn Aug 12 '15 at 12:50
  • do you use LESS/SASS? could loop things up. or just use `ng-style` and modify the style directly and not the class. – casraf Aug 13 '15 at 08:09