I was expecting a in-built directive or a tag for this but probably not according to their documentation.
This is the example.
<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
<md-radio-group ng-model="data.group1">
<md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
<md-radio-button value="Banana"> Banana </md-radio-button>
<md-radio-button value="Mango">Mango</md-radio-button>
</md-radio-group>
You do not need to override any default CSS:
<md-radio-group layout="row">
<md-radio-button value=0 class="md-primary">On</md-radio-button>
<md-radio-button value=1> Off </md-radio-button>
</md-radio-group>
Just put in md-radio-group
tag a layout="row"
attribute.
Better not override any existing class.
Use the directive ng-style
and give value for display parameter.
<md-radio-group ng-model="selvalue">
<md-radio-button value="A" class="md-primary" ng-style="{'display':'inline'}"> Apple</md-radio-button>
<md-radio-button value="R" class="md-primary" ng-style="{'display':'inline'}"> Orange </md-radio-button>
</md-radio-group>