找不到一种简单的方法来向左显示离子无线电图标

Question

在ion-icon指令中,所选项目的图标右侧显示为defualt,有一种简单的方法显示在左侧？谢谢

 <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

将item-left属性放入<ion-radio>元素.

Answer 2

看起来不可能使用内置的 Ionic 类来对齐单选按钮内的图标。

然而，使用一些自定义 CSS 和 ang-class你可以做到这一点。

超文本标记语言

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

通过此设置，单选文本会从项目的左侧偏移。如果您希望单选文本左对齐，并在选择时移动，您可以ng-class向元素添加 a 以在选择时偏移单选文本。

这是一个Ionic Play演示。