CODEWITHSUNDEEP
angularjs
Himmators
Himmators

Reputation: 15016

Set class to checked radio-button in angular?

I'm using ng-repeat to generate a bunch of radiobuttons.

<div class="radiobutton" ng-repeat="mylabel in field.labels">
    <input
        type="radio" 
        name="{{field['key']}}"
        value="{{mylabel.label}}" 
        id="{{mylabel.name}}"

    >
    <label for="{{field['key']}}">
        {{mylabel.label}}
    </label>
</div>

I would like to add a class to the input-element based on if the input-element is checked or not, using angluar. As far as I can understand I should apply a ng-model to the element and then use that to declare a ng-class, but how do I make it so that each input get's it's own model-name?

Upvotes: 0

Views: 3654

Answers (1)

apneadiving
apneadiving

Reputation: 115541

try:

<div class="radiobutton" ng-repeat="mylabel in field.labels">
    <input
        type="radio" 
        name="{{field['key']}}"
        value="{{mylabel.label}}" 
        id="{{mylabel.name}}"
        ng-model='$parent.my_radio_button'
        ng-class='{ class_name: (my_radio_button == mylabel.label) }'
    >
    <label for="{{field['key']}}">
        {{mylabel.label}}
    </label>
</div>

Since you use radio buttons, I guess only one can be selected, so you can share the same ng model.

Upvotes: 1

Related Questions