javascript - Rgba value is not updated in ng-style - Stack Overflow

admin管理员组

文章数量:1345164

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

Share Improve this question Follow asked Jul 28, 2015 at 19:31 GusGusGusGus 25066 silver badges1717 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

本文标签： javascriptRgba value is not updated in ngstyleStack Overflow