单选按钮和AngularJS

Question

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/

Answer 1

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!

Answer 2

您提供的代码运行良好，我认为您可以在初始化之前或之后在js中进行更多检查。