Rgba value is not updated in ng-style

Question

I have a div which has an ng-style attribute with an rgba value that uses a $scope variable for the alpha value:

ng-style="{'background-color': 'rgba(255,0,0,{{ alphaValue / 100}})'}"

I have an input slider which changes the value of alphaValue. I can see the change of the value using the console.log and the rgba value is being updated in the debugger in the html. It is just not being applied in the view.

Any suggestions?

Answer 1

It would simply look like below

ng-style="{'background-color': 'rgba(255,0,0,'+ (alphaValue/ 100) +')'}"

Answer 2

Create a controller method get the style object. Its cleaner approach.

HTML

ng-style="ctrl.getElementStyle(alphaValue)"

CONTROLLER

 ctrl.getElementStyle = function (alphaValue) {
        var alpha = alphaValue / 100;
        return {'background': 'rgba(255,0,0,' + alpha +')'};
  };