CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
chandru
chandru

Reputation: 157

Radio button is not clickable in ng-repeat

I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!

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

Upvotes: 0

Views: 1893

Answers (4)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"

Markup

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

Upvotes: 0

Rishi Prakash
Rishi Prakash

Reputation: 1779

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

I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.

and Id's are dynamically generated now.

Working Now!!!!!!

Upvotes: 0

Michael Kang
Michael Kang

Reputation: 52837

You need to fix the following issues:

  1. The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
  2. All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
  3. Display different values for each radio button: value="{{n}}"

NOTE: Remember, ngRepeat creates a child scope for each iteration.

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

Upvotes: 0

Abhishek Mishra
Abhishek Mishra

Reputation: 81

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

Upvotes: 1

Related Questions