我目前有这个用户界面:
问题是,当我单击一个单选按钮时,任何预选按钮都将变为未选择状态。因此,这告诉我没有不同的输入组-所有<input>
标记可能都在一个大组中。
这可能是一个非常普通的问题,但是我根本不是HTML或Angular专家。
这是此代码,使用ng-repeat有一个外循环和一个内循环:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
也许发生这种情况的原因是因为我有嵌套表格?也许我需要摆脱外在形式?
最佳答案
使用name
属性对单选按钮进行分组。
<input>
类型属性
要显示的控件类型。如果未指定此属性,则默认类型为text
。可能的值为:
radio
:单选按钮。您必须使用value
属性来定义此项目提交的值。使用checked
属性指示默认情况下是否选中此项目。 name
属性具有相同值的单选按钮在同一“单选按钮组”中。一次只能选择一个分组中的一个单选按钮。
– MDN HTML Element Reference - <input>
也可以看看:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference
关于javascript - 在循环中对单选按钮输入元素进行分组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42661524/