I need to modify the css of a radio button Md-radio-button via jQuery

Question

Colleagues, I’m trying to modify the css of a md-radio-button via jQuery but I’m not getting it.

<md-radio-button id="radio_letter" style="margin: 2px!important" ng-click="changeCorrectAlternative(command.key, alternative.key)" ng-repeat="alternative in command.alternative_set" ng-value="alternative.key">
    <md-item style="margin:-21px;text-align:center;">
        {{ ORDER_TO_LETTER[alternative.order-1] }}
    </md-item>
</md-radio-button>

Jquery

jQuery(document).ready(function () {
    jQuery('#radio_letter').each(function(){
        $(this).css('width','21px');
        $(this).css('height','21px');
    });
});

Any suggestions?

Answer 1

You can try calling your jquery by the ng-init directive. If it doesn’t work, call your Jquery function from within the controller using the service $window and $timeout

Creates an adjustment function in the global scope (window)

function adjust() { 
      jQuery('#radio_letter').css({ 'width':'21px', 'height':'21px'});
});

Try:

<md-radio-button ng-init="window.adjust()" ...

Or by the Controller:

app.controller('MeuController', function($window, $timeout) { 
     $timeout($window.adjust, 50);
});