Pre selecting ion-radio's in a slidebox

ionic-v1
1

Hey all,

I’ve got an ionic slidebox which contains an ng-repeat:

<ion-slide ng-repeat="question in selectedQuestions">

Inside this, I have a 4 ion-radio’s:

<ion-radio ng-model="qData.qSelected" checked class="item-text-wrap" ng-click="userAnswer('A')" ng-value="question.userAnswer">
  {{question.userAnswer}}
  <h2 ng-bind-html="question.answer1|toString|answerToImage">{{question.answer1|toString|answerToImage}}</h2>
</ion-radio>

<ion-radio ng-model="qData.qSelected" class="item-text-wrap" ng-click="userAnswer('B')" ng-value="question.userAnswer">
  <h2 ng-bind-html="question.answer2|toString|answerToImage">{{question.answer2|toString|answerToImage}}</h2>
</ion-radio>

<ion-radio ng-model="qData.qSelected" class="item-text-wrap" ng-click="userAnswer('C')" ng-value="question.userAnswer">
  <h2 ng-bind-html="question.answer3|toString|answerToImage">{{question.answer3|toString|answerToImage}}</h2>
</ion-radio>

<ion-radio ng-model="qData.qSelected" class="item-text-wrap" ng-click="userAnswer('D')" ng-value="question.userAnswer">
  <h2 ng-bind-html="question.answer4|toString|answerToImage">{{question.answer4|toString|answerToImage}}</h2>
</ion-radio>

Now, for the functionality for my app, there is a way for a user to save their progress. In this process, I save a custom selectedQuestions array which contains the field userAnswer for each question the user has answered. In the userAnswered field, values inside will look like either “A”, “B”, “C” or “D”.

qData.qSelected also contains the users answer for a specific slide. However, I’ve tried almost everything to preset these ion-radio’s to the users old selected answers without any luck.

So my question is, are there any ways to set an ion-radio to be pre-selected via HTML? That way I could use ng-if’s or something similar to do this.

Alternatively are there any classes or other ways anyone can think of to preset ion-radio’s on load based off an array?

Thanks!

2

Have seen this codepen? This can show you have to pre-select an ion-radio

3

Hi shubs,

Have you found a solution to your problem?

4

This doesn’t seem to work with an array in your ng-model variable as per this Codepen: http://codepen.io/anon/pen/qdmvQo

Although the ng-model is set correctly, the appropriate radio button is not checked. Any ideas?

1 Like
5

use ng-repeat with ion-radio.
and make sure that that you have given proper group name for that radio group.It should unique for every radio group. and then it will persist the radio state…
here is sample:

<ion-slide ng-repeat="que in selectedQuestions">
{{que.qName}}
<ion-radio name="group-{{que.QuestionId}}" ng-repeat="optionItem in que.Options" ng-value="optionItem.OptionId" ng-change="test.setAnswer(que,optionItem)" ng-model="que.selectedanswer">{{optionItem.OptionName}}</ion-radio>
<ion-slide ng-repeat="que in selectedQuestions">
1 Like