Howto have clickable icon in radio-item

1

I need a clickable item in a radio-item. I tweaked a bit css and the icon is displayd but it is not clickable. If I click on the icon the radio is selected.
Any suggestion this???

2

Got a codepen I could look at?

3

@mhartington Here is a codepen of my issue.

Click on PLUS to open a modal. within this modal I have a list with some radio-items. You can click the radios to fir the ng-click functions. But it’s not possible to click on the button in teh radio-item. This will fore also the mg-click function of the radio.

PS I tweeked a bit css to put the checkmark at the left. In my app I have the content of shifted to the right to align with other items in the list. In my app I also did something to remove the >. I cant find how.

Most important is how to respond to the button tap.

4

@mhartington The embedded codepen above doesnt work. Hers is the direct link

enter link description here

5

So by default, the ionRadio isn’t setup for this, but we can easily extend it.

  .directive('mhRadio', function(ionRadioDirective) {
  return angular.extend({}, ionRadioDirective[0], {
    template:'<label class="item item-radio">' +
    '<input type="radio" name="radio-group">' +
    '<div class="item-content disable-pointer-events" ng-transclude></div>' +
    '<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' +
    '</label>'
  });
});

So now we can extend the directive at a lower level and change it, add to it, remove, etc.

This should get you in the right direction.

6

@mhartington Hi Mike, thank you for your service
I never used a custom directive. But I sure want to learn it.
In your codepen I see you added a mhRadio-item in the list. Allthough you used the mhRadio directive this radio behaves like the other radios, right.
How do we extend mhRadio to make it respond to the ion-ios7-information-outline.
I bet there must be some more added to the template of mhRadio to achieve that.
Do I have to put the button in the directive somewhere??

1 Like
7

I need the same and the suggested codepen is not working.
Any idea?

1 Like