How to add checked class to a radio button in AngularJS

Question

In AngularJS, I'm trying to add/remove a checked class on a parent element, when its child radio button is checked/unchecked.

<label ng-class="{checked: menuType.isChecked0}">
    <input type="radio" name="menuType" ng-model="menuType.isChecked0" />Text 1
</label>
<label ng-class="{checked: menuType.isChecked1}">
    <input type="radio" name="menuType" ng-model="menuType.isChecked1" />Text 2
</label>

Here is a fiddle: http://jsfiddle.net/fAA2w/

There is no controller or any other relative code. If there is a better way to approach this, please share. This seems simple enough, but I cannot find an answer to this question. What am I doing wrong here?

Steve Farthing · Accepted Answer · 2014-02-21 22:01:15Z

15

You need to give the radio input a value.

For more examples see http://docs.angularjs.org/api/ng/input/input%5Bradio%5D.

<div ng-app>
<label ng-class="{checked: isChecked == 1}">
    <input type="radio" name="menuType" ng-model="isChecked" value="1" />Text 1
</label>

<label ng-class="{checked: isChecked == 2}">
    <input type="radio" name="menuType" ng-model="isChecked"  value= "2" />Text 
</label>
</div>

answered Feb 21, 2014 at 22:01

Steve Farthing

7926 silver badges10 bronze badges

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

2 Comments

matthewpavkov Over a year ago

Ok, that makes sense. Any other suggestions for accomplishing this?

Mr. Mr. Over a year ago

+1, but only worked when I compared as a string, i.e., ng-class="{checked: isChecked == '1'}"

tymeJV · Accepted Answer · 2014-02-21 21:18:27Z

0

This is the correct way to be doing it. Reason being, when your ng-model changes, your ng-class will pick up on that and update the view, the Angular way!

answered Feb 21, 2014 at 21:18

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

matthewpavkov Over a year ago

Well, this code is not working for me. I suppose if this is correct, then something else must be wrong somewhere else. Perhaps this isn't getting processed by Angular at all.

tymeJV Over a year ago

If you can make a demo I'll check it out. Looks right syntax wise tho.

Collectives™ on Stack Overflow

How to add checked class to a radio button in AngularJS

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related