Question

我想列出左边有imagen的项目，右边有一个切换。

这是我的结果：

正如您所看到的，切换位于左侧而不是右侧，如下图所示。这就是我需要解决的问题

我想得到这个结果（Call Ma）：

但是使用切换而不是＆＃34;电话大纲＆＃34;图标。

所以..这是我的HTML：

<ion-view>
<ion-content>
  <ion-list>
    <div ng-repeat="cancha in vm.canchasComplejo"  class="list card">
      <ion-item class="item-stable"
                ng-click="vm.toggleGroup(cancha)"
                ng-class="{active: vm.isGroupShown(cancha)}">
          <i class="icon" ng-class="vm.isGroupShown(cancha) ? 'ion-minus' : 'ion-plus'"></i>
        &nbsp;
        Group
      </ion-item>
      <ion-item class="item-accordion"
                ng-repeat="opcion in cancha.opciones"
                ng-show="vm.isGroupShown(cancha)">
          <div  class="item item-icon-left item-icon-right" >
              <i class="icon ion-chatbubble-working"></i>
              Option
              <label class="toggle toggle-assertive">
                  <input type="checkbox">
                      <div class="track">
                          <div class="handle"></div>
                      </div>
              </label>
          </div>    
      </ion-item>
    </div>
  </ion-list>
</ion-content>
</ion-view>

你能告诉我如何解决我的问题吗？感谢

Answer 1

使用item-toggle类。下面的示例代码

    <div class="item item-toggle item-text-wrap">
      <i class="icon ion-chatbubble-working"></i>
           Option
      <label class="toggle toggle-assertive">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </div>

列表未在HTML5中正确显示切换

1 个答案: