我目前有这个用户界面:

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

问题是,当我单击一个单选按钮时,任何预选按钮都将变为未选择状态。因此,这告诉我没有不同的输入组-所有<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/

10-09 23:32