Ion-radio not in scope [solved]

1 
<ion-radio ng-model="formData.gender" value="male">Man</ion-radio>
<ion-radio ng-model="formData.gender" value="female">Vrouw</ion-radio>

In the codepen below you can type text in the input field and it will appear in the scope. When you select a gender, it won’t show up in the same scope.

I have two questions here: how can I have the gender show up in the scope and how can I select one of the radio’s as the default selected one.

When using “normal” radio buttons, everything works well.

<input type="radio" ng-model="formData.color" value="red">  Red 
<input type="radio" ng-model="formData.color" value="blue"> blue

Thanks for helping out, I’m rather new to both angular and ionic.

2

Hey Jorre,

Few things, when using ng-model, you need to use ng-value. Also, ng-value is parsed by angular, so for strings you have to wrap it in extra quotes like: ng-value="‘red’". Lastly, angular directives like ion-radio have their own scope, so to get in the main controller’s scope, you have to reference $parent.formData.gender. Here’s an example.

1 Like
3

Thanks a lot, it’s the extra quotes that did the trick! Thanks for the $parent pointer as well, that will save me a lot of trouble in the near future.

4

The Codepen example above it doesn’t work with ng-repeat, why?

5

I think I figured out, it works but only if you use an object like $parent.object.value, because if you use something like $parent.value the model it won’t be updated.

2 Likes
6

This is a weird design.

1 Like
7

@perry @daver182

I’m not able to get the value from an ng-repeat… Here’s my pen:

See the Pen ion radio select by Luis Cabrera (@gigocabrera) on CodePen.