单选按钮在 ng-repeat 中不可点击答案

【问题标题】：Radio button is not clickable in ng-repeat单选按钮在 ng-repeat 中不可点击
【发布时间】：2015-04-06 06:40:56
【问题描述】：

我正在尝试使用 ng-repeat 迭代单选按钮。选中第一个单选按钮后，所有单选按钮都完美可见，但是当我尝试选择其他单选按钮时，单选按钮不可点击。任何人都可以帮我解决我在这里缺少的东西..!!

 <div class="form-group form-radio" ng-repeat="n in [0,1]">
                          <div class="col-sm-12">
                             <div class="radio padding-bottom20">
                                <input class="form-input"  type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
                                <label class="form-label" for="rb4">{{n}}</label>
                             </div>
                          </div>
                       </div>

【问题讨论】：

ng-model 缺少单选按钮，它可能是 ng-model="radio[$index]"
所有单选按钮都具有相同的值（和 id）。
在单选按钮的循环 id 内应该是唯一的。
@chandru 如果你愿意，你可以接受答案。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

更正的html

<div class="form-group form-radio" ng-repeat="n in [0,1]">
                          <div class="col-sm-12">
                             <div class="radio padding-bottom20">
                                <input class="form-input"  type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
                                <label class="form-label" for="rb4_{{n}}">{{n}}</label>
                             </div>
                          </div>
                       </div>

【讨论】：

你只需让它动态化，它就会工作 id="rb4_{{n}}" 和 for="rb4_{{n}}"

【解决方案2】：

   <div class="form-group form-radio" ng-repeat="n in [0,1]">
                          <div class="col-sm-12">
                             <div class="radio padding-bottom20">
                                <input class="form-input"  type="radio" id="rb4_{{$index}}" name="optionsRadiosA"    ng-model="radioVal[$index]">
                                <label class="form-label" for="rb4_{{$index}}">{{n}}</label>
                             </div>
                          </div>
                       </div>

我在每次输入迭代中都添加了 ng-model="radioVal_{{$index}}"，这是因为 ng-model 将包含单选按钮的当前 ng-value。试试看，然后回复我。

现在动态生成 ID。

正在工作！！！！！！

【讨论】：

这不起作用 ng-model 从不接受插值
感谢@Rishi Prakash，它对我来说工作得很好......！！但是一个小的变化是 id 值应该与 value id="rb4_{{n}}" 和 for="rb4_{{n}}" 相同
进行了更改，检查一下。如果我有帮助，您可以接受我的回答（或对您有帮助的回答：）

【解决方案3】：

您需要解决以下问题：

模型必须存在于父范围内。为此，请使用 ngInit 在 ngRepeat 之外初始化 ngModel：ng-init="selected = { number:0 }"
所有单选按钮控件必须绑定到同一个 ngModel。将 ngModel 添加到您的输入控件，并将其绑定到您在父范围中声明的 ngModel：ng-model="selected.number"
为每个单选按钮显示不同的值：value="{{n}}"

注意：请记住，ngRepeat 会为每次迭代创建一个子作用域。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app  ng-init="selected = { number:0 }">
  <div class="form-group form-radio" ng-repeat="n in [0,1]">
                          <div class="col-sm-12">
                             <div class="radio padding-bottom20">
                                <input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
                                <label class="form-label" for="rb4">{{n}}</label>
                             </div>
                          </div>
                       </div>
  {{ selected }}
</div>

【讨论】：

【解决方案4】：

您应该为每个无线电元素设置不同的 ng-model，您可以使用 ng-model="radio[$index]" 来实现

标记

<div class="form-group form-radio" ng-repeat="n in [0,1]">
    <div class="col-sm-12">
        <div class="radio padding-bottom20">
            <input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
            <label class="form-label" for="rb4">{{n}}</label>
        </div>
    </div>
</div>

【讨论】：

您似乎不了解单选按钮的工作原理。您所有的单选按钮都有不同的名称，因此它们不是相互排斥的。它们也有相同的 id，这使得 html 代码无效并且标签不起作用。
@pankajparkar 这是错误的，您需要保持 ID 不同但名称必须相同。
哦，我错过了 id 部分让我修复它，我错误地为 name 做了它应该是 id，我更新了我的答案 @JBNizet 谢谢:)