Angular Material - md-radio-group 未呈现为预期的 safari

Question

我通过 ng-repeat 有多行单选按钮。在 Safari 中，单选按钮相互重叠。以下行为的照片：

在 Chrome 中，它呈现为下面的预期照片。 [

我做错了什么？代码如下：

<div ng-repeat="item in multi.multiChoice" layout="column" layout-align='start start' ng-if="multi.viewFn()">
  <div class='multi-button' flex='70' md-theme="altTheme">
    <md-radio-group class='md-primary' ng-model="multi.content.value" >
        <div flex layout='row' layout-padding layout-align="start center"  ng-style="{'background-color':multi.checkFn('BG',item.value),'color':multi.checkFn('FONT',item.value)}">          
          <md-radio-button flex ng-value="item.value">
            {{item.value}}
          </md-radio-button>
        </div>
        <span </span>
    </md-radio-group>        
  </div>      
</div>
<md-button  class="md-raised md-warn" aria-label="Edit" ng-click="multi.content.value=null" ng-if="multi.viewFn()">
      Clear
</md-button> 
<label ng-if="!multi.viewFn()">{{multi.content.value}}</label>

Answer 1

您需要将 ng-repeat 从最外层的 div 移动到 md-radio-button 的父级 div - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-radio-group class='md-primary' ng-model="multi.content.value" >
    <div flex layout='row' layout-padding layout-align="start center"  ng-style="{'background-color':multi.checkFn('BG',item.value),'color':multi.checkFn('FONT',item.value)}"  ng-repeat="item in multi.multiChoice">          
      <md-radio-button flex ng-value="item.value">{{item.value}}</md-radio-button>
    </div>
  </md-radio-group>        
  <md-button  class="md-raised md-warn" aria-label="Edit" ng-click="multi.content.value=null">
    Clear
  </md-button> 
  <label>{{multi.content.value}}</label>
</div>

JS

.controller('AppCtrl', function($scope) {
  $scope.multi = {
    multiChoice: [
      {value: "Tom Cruise"},
      {value: "Danny De Vito"},
      {value: "Hugh jackman"}
    ]
  }
});

Angular Material - md-radio-group 未呈现为预期的 safari

Angular Material - md-radio-group not rendering as expecting safari

angularjs

angular-material