CODEWITHSUNDEEP
javascriptjqueryangularjsradio-button
echo_salik
echo_salik

Reputation: 859

Radio Button and AngularJS

I know this is a common question on SO, but none of those solve my issue.

This code doesn't allow me to click/select the radio button. And I am unable to see whats wrong. It may bey something simple that I am missing, I'll be glad if someone can help out.

<div input-field class="col m6" ng-init="student.username = 0">
<p>Username Generation</p>
<p>
    <input class="with-gap" type="radio" name="user" ng-model="student.username" value="0" required />
    <label>Same as Registration ID</label>
</p>
<p>
    <input class="with-gap" type="radio" name="user" ng-model="student.username" value="1" required />
    <label>Auto Generate</label>
</p>

The problem is I cannot select the Radio button, where set in ng-init or not.

JSFIDDLE: https://jsfiddle.net/znfvmr80/5/

Upvotes: 0

Views: 47

Answers (2)

echo_salik
echo_salik

Reputation: 859

Well the fix was relative easy, and kinda due to me missing out on a for attribute. Thanks to @Joyson for helping out, him thinking got me thinking.

This is the correct code:

<div input-field class="col m6" ng-init="student_username = 0">
<p>Username Generation</p>
<p>
    <input class="with-gap" type="radio" name="user" ng-model="student_username" value="0" required id="same_as_reg" />
    <label for="same_as_reg">Same as Registration ID</label>
</p>
<p>
    <input class="with-gap" type="radio" name="user" ng-model="student_username" value="1" required id="autogen" />
    <label for="autogen">Auto Generate</label>
</p>

Materialize requires a for attribute label for radio buttons to work.

Thanks everyone!

Upvotes: 2

Joyson
Joyson

Reputation: 380

The code you have given is working fine i think you could check more in your js before or after initialization.

Upvotes: 0

Related Questions