如何在angular材料中水平alignment单选button？

我期待一个内置的指令或标签，但可能不符合他们的文档。

这是例子 。

<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> 

Answer 1

你不需要重写任何默认的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> 

只需在md-radio-group标签中添加一个layout="row"属性即可。

Answer 2

最好不要覆盖任何现有的类。

使用指令ng-style并为显示参数赋予值。

 <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>