0

I know how to set the color of a radio button label with ng-style, like this: 

ng-style="{'background-color': buttonColor}"

But how can I change the color of the radio button label when it is checked using the ng-style directive? In css it is like this: 

.radio-button:checked+label {
    background-color: #52b6db;
    border: 1px solid #52b6db;
}

EDIT: Basically, how do I tap into the :checked+label style property through ng-style?

georgej
  • 3,041
  • 6
  • 24
  • 46

1 Answers1

0

Basically call a function in your controller for ng-style and return the appropriate style object based on the value of the button.

ng-style="$ctrl.getStyle()"

function getStyle() {
if (some condition) {
    return {
        background-color: #52b6db;
        border: 1px solid #52b6db;
} else {
    return {...}
}

OK, this is a little bit out there, but you can do this. If on your index.html page you've loaded your app at the document level (on the html tag), you can actually have a section with a controller on it and define css using controller references, so you could dynamically set colors for radio-button:checked+label this way.

Mike Feltman
  • 5,160
  • 1
  • 17
  • 38
  • I am wondering tho how to tap into the `:checked+label` style property through `ng-style`? – georgej Jul 20 '17 at 15:15
  • I don't think you need ng-style at all for this. It seems like something that you should just be able to do with straight css. I wouldn't try to mix ng-style with css classes. Seems like just going with ng-class would be much more straightforward. – Mike Feltman Jul 20 '17 at 15:22
  • but the thing is that with straight css classes I cannot make the color dynamic, whereas with `ng-style` I can – georgej Jul 20 '17 at 15:28
  • OK. Not sure you can tie into :checked+label there, but using a controller method should give you the same result. – Mike Feltman Jul 20 '17 at 15:36
  • Updated the answer. I did something like this on an app before I started using Angular Material. – Mike Feltman Jul 20 '17 at 15:55