Question

我目前有这个用户界面：

问题是当我点击一个单选按钮时，任何预选的按钮都将被取消选中。因此，它告诉我没有不同的输入组 - 所有<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>

也许这种情况发生的原因是因为我有嵌套表格？也许我需要摆脱外形？

Answer 1

使用name属性组合单选按钮。

<input>类型属性

要显示的控件类型。如果未指定此属性，则默认类型为text。可能的值有：


radio：一个单选按钮。您必须使用value属性来定义此项目提交的值。使用checked属性指示默认情况下是否选中此项。具有name属性相同值的单选按钮位于相同的“单选按钮组”中。一次只能选择一个组中的一个单选按钮。


– MDN HTML Element Reference - <input>

另见：

将单选按钮输入元素分组为循环

1 个答案:

`<input>`类型属性

将单选按钮输入元素分组为循环

1 个答案:

<input>类型属性

`<input>`类型属性