Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Radio buttons getting selected automatically for all the rows of ng-repeat

I have a list of Conditions for which the user has to click yes or no for each condition. Using ng-repeat to show all the condition lists and a column with radio buttons for 'Yes' and 'No' pertaining to that code. The choice of selecting yes or no is independent of choice of another row. When I mark a certain row with 'yes' , all the rows are being marked automatically 'yes'. Ideal behavior is the initial radio button values should be empty by default and should be able to select yes or no for each row. Can somebody please help with the mistake that am doing here ? Thanks.

<div ng-repeat= "person in myService.codeDetail">
 <div class="col-md-2">
          <div class="radio">
            <input 
                   type="radio"
                   name= "radio{{$index}}"
                   id=""
                   data-ng-model= "model.isChecked"
                   ng-value="true"
                   ng-click="myService.updateList(patient.code)"
              >
            <label for="radio{{$index}}">Yes</label> 
          </div>
          <div class="radio">
            <input
                   type="radio"
                   name="radio{{$index}}"
                   id=""
                   data-ng-model="model.isChecked"
                   ng-value="false"
                   ng-click="myService.updateList(person.code)"                  
            >
            <label for="radio{{$index}}">No</label> 
          </div>
        </div>

Json Object used to pull the code, description from

     { "totalCount" : 48, "count" : 3, "offset" : 0, "limit" : 3,
        "codeDetail" : 
     {
     "codeList" : [{"Icd" : "250.42", "description" : "type 2", "date": "11/28/2015"},
     {"Icd" : "250.41", "description" : "type 1", "date": "11/27/2015"},
     {"Icd" : "250.40", "description" : "type 0 ", "date": "11/26/2015"}]
} 

}

angular Controller :

   $scope.model = {}; // model object from service to store data
   $scope.myService = myService // binding angular service class to scope

   myService.updateList = function() {}; // a method in angular service

enter image description here

like image 605
Rk R Bairi Avatar asked Dec 16 '25 14:12

Rk R Bairi


2 Answers

You need to use $index:

Then, turn the data-ng-model into an array of true or false values and pass the index into into the data-ng-model like this:

data-ng-model = "model.isChecked[$index]"

And then your array can live in on scope like this:

scope.model.isChecked[$index] = [null, null... for how many questions you have]

Also, on a best-practices note, you should leverage the person object you are creating in the ng-repeat. You can have the person's answers stored as a property of this 'person' object as such:

data-ng-model = "person.answer" or something similar / more semantic.

One more note, you might take a look at angular's documentation regarding radio buttons, seems you could bring them more into line with angular's preferred implementation.

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

like image 54
maxwell Avatar answered Dec 19 '25 05:12

maxwell


It is because your data-ng-model= "model.isChecked" is same for all the radio input in ng-repeat .

Use somthing like this : data-ng-model= "model['isChecked'_{{$index}}]"

OR

Have an array like

$scope.someVariable =['radio1','radio2' ....]

and use it like this :

data-ng-model= "someVariable[$index]"

like image 32
bob Avatar answered Dec 19 '25 06:12

bob



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!