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?

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?

• javascript
• css
• angularjs
• angularjs-ng-change
• ng-style

• 1 Try using - ng-style="{'background-color': 'rgba(255,0,0,alphaValue / 100)'}" – Nikhil Aggarwal Commented Jul 28, 2015 at 19:37
• no that won't work, you need the {{ }} to read the alphavalue. – GusGus Commented Jul 28, 2015 at 19:40
• remove {{}} from around alphaValue – Liam Commented Jul 28, 2015 at 20:06

3 Answers 3

It would simply look like below

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

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

I suspect you will need to resort to using a controller method:

$scope.getRGBA = function(alpha){              
   return 'rgba(255,0,0,'+ alpha / 100 + ')';
}

HTML

ng-style="{'background-color':  getRGBA (alphaValue)}"

Should make sure alpha isn't undefined also and set a default