want to pass value selected in radio button html to controller javascript

Question

I am trying to pass value from my html to controller by radio buttons.

html code

<div>
<p>Please select your gender:</p>
  <input type="radio" id="male" name="gender" value="male" [(ngModel)]="male.value"
   ng-click="vm.valueSelected($event.target.value)">
  <label for="male">Male</label><br>

  <input type="radio" id="female" name="gender" value="female" [(ngModel)]="female.value"
   ng-click="vm.valueSelected($event.target.value)">
  <label for="female">Female</label><br>

<div>

controller

vm.valueSelected = function(value) {
            console.log('valueSelected', value);
}

I am getting undefined on the console for 'value' when I try the above way

I tried many examples http://plnkr.co/edit/4lvJclZuh0lryF1nhmdt?preview

https://plnkr.co/edit/?p=preview&preview

I just need to pass selected radio value to controller not sure what exactly is going wrong.

Answer 1

If you are passing value via event.target.value then value field will be passed. In below example male will be passed if male selected because value="male". Similarly for female as well. ngModel is used to set value of the selected item in the field defined in it.

This worked for me. I tried in Angular.

html

<div>
        <p>Please select your gender:</p>
          <input type="radio" id="male" name="gender" value="male" [(ngModel)]="male"
           (click)="valueSelected($event.target.value)">
          <label for="male">Male</label><br>

          <input type="radio" id="female" name="gender" value="female" [(ngModel)]="female"
           (click)="valueSelected($event.target.value)">
          <label for="female">Female</label><br>
        <div>

JS

valueSelected(value) {
    console.log('valueSelected ', value);
}

If value set is male1 ie, value="male1" then in console valueselected male1 will be printed.