Ionic-framework: ion-radio does not change value when clicking

[sesteva]

 <ion-radio ng-model="pizza.size" ng-value="small">Small</ion-radio>

When I click it does not update the model

[perrygovier]

Can you set up an example?

It's worth noting that directives like ion-radio have their own controller/scope, so to access vars in your state's/page's scope, you'd have to reference $parent like:

 <ion-radio ng-model="$parent.pizza.size" ng-value="small">Small</ion-radio>

[sesteva]

I think Im confused. The example shows no need to reference the parent and based on the code the directive captures the model into the scope.
I ll try to recreate in a plunker.

.directive('ionRadio', function() {
  return {
    restrict: 'E',
    replace: true,
    require: '?ngModel',
    scope: {
      ngModel: '=?',
      ngValue: '=?',
      ngChange: '&',
      icon: '@',
      name: '@'
    },
    transclude: true,
    template: '<label class="item item-radio">' +
                '<input type="radio" name="radio-group"' +
                ' ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
                '<div class="item-content disable-pointer-events" ng-transclude></div>' +
                '<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' +
              '</label>',

    compile: function(element, attr) {
      if(attr.name) element.children().eq(0).attr('name', attr.name);
      if(attr.icon) element.children().eq(2).removeClass('ion-checkmark').addClass(attr.icon);
    }
  };
});

[ericwooley]

I had the same issue and I have been playing around with the source some.

.directive('ionRadio', function() {
  return {
    restrict: 'E',
    replace: true,
    require: '?ngModel',
    scope: {
      ngModel: '=?',
      ngValue: '=?',
      ngChange: '&',
      icon: '@',
      name: '@'
    },
    transclude: true,
    template: '<label class="item item-radio">' +
                '<input type="radio" name="radio-group"' +
                ' ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
                '<div class="item-content disable-pointer-events" ng-transclude></div>{{ngModel}} - {{ngValue}}' + // MODIFIED HERE
                '<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' +
              '</label>',

    compile: function(element, attr) {
      if(attr.name) element.children().eq(0).attr('name', attr.name);
      if(attr.icon) element.children().eq(2).removeClass('ion-checkmark').addClass(attr.icon);
    }
  };
});

I added {{ngModel}} - {{ngValue}} to the template as text, and the model does appear before you click on the ion-radio. However, ngValue does not.

It seems to me that the ngValue is not being retrieved and once you click on one of the radio icons you set the model to "". In my case, the model was already empty which made it appear as if there was nothing happening.

[ericwooley]

I figured it out. The value was being accepted as a value not variable not as a value.

.directive('ionRadio', function() {
  return {
    restrict: 'E',
    replace: true,
    require: '?ngModel',
    scope: {
      ngModel: '=?',
      ngValue: '=?',// WRONG
      ngValue: '@',// CORRECT
      ngChange: '&',
      icon: '@',
      name: '@'
    },
    transclude: true,
    template: '<label class="item item-radio">' +
                '<input type="radio" name="radio-group"' +
                ' ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
                '<div class="item-content disable-pointer-events" ng-transclude></div>' +
                '<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' +
              '</label>',

    compile: function(element, attr) {
      if(attr.name) element.children().eq(0).attr('name', attr.name);
      if(attr.icon) element.children().eq(2).removeClass('ion-checkmark').addClass(attr.icon);
    }
  };
});

So the source needs to be changed to make it work correctly.

[perrygovier]

When #1500 is approved and closed, this can be closed as well.

[rknell]

I had the same problem but the $parent worked for me.

+1 For not mentioned in the documentation - which even goes as far as to say it works exactly the same as an angular control and sends you there with a link.

Is there some way I can contribute to the documentation and create a pull request?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.