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

あなたはmd-radio-buttonの親divに最も外側のdivからng-repeatを移動する必要がある - JS

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> 

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