角度材料 - md-radio-group不能呈现为期待的野生动物园

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移至div的父md-radio-button - 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"}
    ]
  }
});