CODEWITHSUNDEEP
angularjsionic-framework
Anand Parmar
Anand Parmar

Reputation: 168

radio button selection remove after click on other group of radio box

I am facing problem in two radio group box in ionic when i click on one group of radio the selected answer was saved after clicking second radio group first selected radio was removed

<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}
<div ng-repeat="q in question" >

                <div class="list">

                    <div class="item item-divider">
                        {{q.question}}
                    </div>
                    <ion-radio ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer" >
                        {{ option }}
                    </ion-radio>

                    <br>

                </div>
            </div>


angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope) {
  $scope.question = 
[
  {
    "is_radio": true,
    "question": "Roughly how much of your profile was spent on digital activities in your last job?",
    "options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
    "id": "130",
    "answer": ""
  },
  {
    "is_radio": true,
    "question": "Have you spent more time with B2B or B2C?",
    "options": ["B2C","Both","Less than 10%"],
    "id": "130",
    "answer": ""
  }
]

})

Here is preview | jsfiddle

Upvotes: 1

Views: 1063

Answers (2)

Dev
Dev

Reputation: 62

angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope) {
  $scope.question = 
[
  {
    "is_radio": true,
    "question": "Roughly how much of your profile was spent on digital activities in your last job?",
    "options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
    "id": "129",
    "answer": ""
  },
  {
    "is_radio": true,
    "question": "Have you spent more time with B2B or B2C?",
    "options": ["B2C","Both","Less than 10%"],
    "id": "130",
    "answer": ""
  }
]
				
})
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}

    <div ng-repeat="q in question" >

					<div class="list">

						<div class="item item-divider">
							{{q.question}}
						</div>
						<ion-radio name="{{q.id}}" ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer" >
							{{ option }}
						</ion-radio>

						<br>

					</div>
				</div>
</div>

Upvotes: 1

J-Mean
J-Mean

Reputation: 1200

Please change following line of code

<ion-radio ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer">

With this

<ion-radio ng-repeat="option in q.options"  ng-value="option" ng-model="q.answer" name="radio_{{$parent.$index}}" >

This will solve your issue. Problem was due to same name given to 2 radio button group. So I had changed that and given dynamically.

Upvotes: 2

Related Questions