javascript - 在循环中对单选按钮输入元素进行分组

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> type attribute

The type of control to display. The default type is text, if this attribute is not specified. Possible values are:

• radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.

– MDN HTML Element Reference - <input>

另请参阅:

• AngularJS input[radio] Directive API Reference
• AngularJS ng-value Directive API Reference
• AngularJS ng-checked Directive API Reference