Syntax to incrementally change CSS background color with angular 1.5 $scope

Question

I have a timer that uses $interval to count down from a number, to zero.

The goal is to take this timer, which is white - and slowly turn it red to give the user come sense of it's importance.

I'd love a better idea, but so far - what I've tried, is to use rgba(255, 255, 255, 1) and then $scope.x & rgba(255, {{x}}, {{x}}, 1) and drop x from 255 to 0, which would produce red.

In the browser console, I can see the inline style incrementing as I expected, however the styles aren't displaying on the element.

I've tried with just style="background-color: {{y}}" and ng-style="{ 'background-color': rgba(255, {{x}}, {{x}}, 1) }" but I'm not getting anything to appear on the front end.

In certain combinations the console shows a style="" and ng-style="" that contradict each other.

Please explain where I may be going astray - or if you recognize any edge cases that could lead to things working differently than expected.

UPDATE:

after some clarification from Sk. Tajbir and Diego, I'm no longer trying to use ngStyle -

Markup

  <div
    ng-if="ctrl.countdown >= 0"
    class="time" rel="medium-up"
    ng-hide="ctrl.selectedAnswer"
    style="background-color: rgba(255, {{countDownColor}}, {{countDownColor}}, 1);">
    <span>{{ctrl.countdown | secondsToDateTime | date:':ss'}}</span>
  </div>

There are 2 versions of this because of a mobile break point - and it's parent relative container etc (this isn't the best option - but it is what is in place currently) --- the rel lets one be shown at a time. I took those out of the equation and nothing changed, so I don't think they play a part. There is the ngHide - but no idea how that could effect the color.

JS

...
$scope.countDownColor
ctrl.countdownTimer = $interval(function () {
    if ( ctrl.countdown < 11 && ctrl.countdown > 0 ) {
        $scope.countDownColor = 255 * (ctrl.countdown / 10);
    } else if (ctrl.countdown === 0) {
        ctrl.selectAnswer(ctrl.timesUpAnswer);
    }
    ctrl.countdown--;
}, 1000);
...

The countdown all works as expected on the front-end and the computed countDownColor shows in the console markup like this:

Sk. Tajbir · Accepted Answer · 2016-05-16 22:12:55Z

1

Mainly ng-style is used for a dynamic styling. For example in a button click you want to change a set of style of an element and this kind of situation you can use ng-style.

But normally in your situation you can use normal style attribute and use {{ }} to bind dynamic value. I've created a small demonstration for you. Hopefully it will be helpful for you. Thanks.

angular.module("app", []).controller("appCtrl", function($scope) {
  $scope.x = 200;
  $scope.y = "200";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appCtrl">
    <label style="color: rgba(100, 0, {{x}}, 1);">Hello World!</label>
    <br/>
    <label ng-style="{'color': 'rgba(100, 0, {{y}}, 1)'}">Hello Universe!</label>
    <br/>
    <button ng-click="x=x-10">Drop X</button>
    {{x}}
  </div>
</div>

answered May 16, 2016 at 22:12

Sk. Tajbir

2902 silver badges9 bronze badges

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

4 Comments

sheriffderek Over a year ago

This makes sense and I've reset my markup to non ngStyle - but the outcome is still not visible. I took out the ngHide and ngIf out just in case they had side-effects - but still no go. Any other edge-cases I could be riding? The timer is a clearly visible number that changes - so there isn't any mystery there. : /

Sk. Tajbir Over a year ago

Can you provide a jsfiddle link to show your issue. This might be a css issue as well but without seeing the error it's a bit tough to solve. Normally your logic and implementation looks good. Thanks.

sheriffderek Over a year ago

Apologies for this. I usually make a targeted use-case - and expect others to do so. I was hoping the screen-shot would ring a bell for someone - because the app is fairly large and I'm unsure what parts could be producing side effects. I'll get something more targeted going.

Sk. Tajbir Over a year ago

yes I understand your situation. I hope you'll get your fix very soon. Best of luck :)

Diego · Accepted Answer · 2016-05-16 22:16:07Z

1

You can use style. e.g.

<p style="background-color: rgba(255, {{color}}, {{color}}, 1);" >Hello!</p>

Controller:

$scope.color = 255;

  $interval(function() {
            if($scope.color>0){
              $scope.color = $scope.color - 25.5;
            }
          }, 1000);

answered May 16, 2016 at 22:16

Diego

7196 silver badges10 bronze badges

2 Comments

sheriffderek Over a year ago

Thanks. This is basically what I have and for some reason, the color isn't showing on the front end - even though I see it in the console.

Diego Over a year ago

This works (tested in chrome and Firefox): plnkr.co/edit/i80lQGMjwY1HS0D6UgcI

Collectives™ on Stack Overflow

Syntax to incrementally change CSS background color with angular 1.5 $scope

UPDATE:

Markup

JS

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

Markup

JS

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related