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

Question

我正在尝试使用 ng-repeat 迭代单选按钮。选中第一个单选按钮后，所有单选按钮都完美可见，但是当我尝试 select 其他单选按钮时，单选按钮不可点击。谁能帮我解决我在这里遗漏的问题..!!

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

Answer 1

   <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。

正在工作!!!!!!

Answer 2

已更正 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>

Answer 3

你应该为每个无线电元素使用不同的 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>

Answer 4

您需要解决以下问题：

模型必须存在于父作用域中。为此，请使用 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>

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

Radio button is not clickable in ng-repeat

angularjs

angularjs-ng-repeat