non trova un modo semplice per visualizzare l'icona della radio ionica a sinistra

Question

Nella direttiva ion-icon, l'icona per l'elemento selezionato viene visualizzata a destra di defualt, c'è un modo semplice per visualizzare a sinistra anziché? grazie

<ion-list>  
     <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'A'">Bogotá</ion-radio> 
     <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'B'">Cali</ion-radio> 
     <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'C'">Medellin</ion-radio> 
     <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'D'">Bucaramanga</ion-radio> 
     <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'E'">Cartagena</ion-radio> 
     <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'F'">San Andres</ion-radio> 
</ion-list> 

Answer 1

Non sembra possibile allineare le icone all'interno dei pulsanti di opzione utilizzando le classi ioniche integrate.

Tuttavia, utilizzando un po 'di CSS personalizzato e un ng-class è possibile farlo funzionare.

HTML

<ion-list>  
    <label class="item item-icon-left item-radio"> 
    <input type="radio" name="group"> 
    <div class="item-content "> 
     Go 1 
    </div> 
    <i class="radio-icon ion-checkmark"></i> 
    </label> 
    <label class="item item-icon-left item-radio"> 
    <input type="radio" name="group"> 
    <div class="item-content "> 
     Go 2 
    </div> 
    <i class="radio-icon ion-checkmark"></i> 
    </label>  

CSS

.item-icon-left .item-content { 
    padding-left:3em; 
} 

.item-icon-left i { 
    left:0; 
    right: auto; 
} 

Con questa impostazione il testo radio è compensato dal lato sinistro della voce. Se si desidera che il testo della radio sia allineato a sinistra e che venga spostato quando selezionato, è possibile aggiungere uno ng-class agli elementi per compensare il testo radio quando selezionato.

Ecco una demo Ionic Play.

Answer 2

inserisce un attributo item-left nell'elemento < ion-radio >.

Answer 3

ho finito per usare questo:

<ion-radio ng-model="model" ng-repeat="item in items" ng-value="item.value" ng-click="select(item)" name="{{name}}"> 
       <i class="icon {{item.icon}}"></i> 
       <span>{{item.label}}</span> 
       <p ng-if="item.desc">{{item.desc}}</p> 
      </ion-radio>