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属性放到＆lt; ion-radio＆gt;元件。

Answer 2

使用内置的Ionic类可能无法在单选按钮中对齐图标。

但是，使用一些自定义CSS和ng-class可以使其工作。

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

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

这是一个Ionic Play演示。

Answer 3

我最终使用了这个：

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

无法找到一种在左侧显示离子无线电图标的简便方法

3 个答案: