Question

我正在尝试使用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>

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

Answer 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值。试试吧，然后回复我。

和Id现在是动态生成的。

立即行动!!!!!!

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会为每次迭代创建一个子范围。

＆＃13;

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

＆＃13;

在ng-repeat中无法单击单选按钮

4 个答案: