2016-06-26 6 views
1

Ich habe eine multi Reihe von Radio-Tasten durch eine ng-Wiederholung. In Safari rendern die Radiobuttons überlappend. Ein Foto des folgenden Verhaltens: Safari behaviourAngular Material - md-radio-gruppe nicht rendering als erwartet safari

In Chrome rendert es wie erwartet Foto unten. [Chrome Behaviour[2]

Was mache ich falsch? Code unten:

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

Antwort

1

Sie müssen die ng-repeat von den äußersten div an die Mutter div der md-radio-button bewegen - CodePen

Markup

<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"} 
    ] 
    } 
}); 
+0

Dank dieses hat funktioniert. Ich fand auch aus irgendeinem Grund, dass es nicht das Layout = 'Spalte' in den äußersten div. –