Question

目前我有一个看起来像这样的离子切换

enter image description here

我想这样做

enter image description here

反正有没有让这件事发生？我读过某个地方，我可以使用ng-true-value和ng-false-value，但这似乎没有做我正在寻找的事情

Answer 1

属性ng-true-value和ng-false-value用于在选中复选框时为ng-model表达式提供特定的自定义值。 ionic 框架不会用它来显示切换中的文本。

但肯定有可能：）

下面是一个指令。在任何现有ion-toggle-text上轻拍ion-toggle，您就可以了。可以使用ng-true-value / ng-false-value属性或;分隔值和ion-toggle-text属性设置开/关文本。如果没有提供文本，则默认为＆＃34; on ＆＃34; ＆安培; ＆＃34; 关＆＃34;

<ion-toggle ion-toggle-text ng-model="simple">
  Simple Example: <b>{{ simple || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text="online;offline" ng-model="customText">
  Custom text: <b>{{ customText || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text ng-true-value="so true" ng-false-value="so false" ng-model="textByValue">
  Text by value: <b>{{ textByValue || 'so false' }}</b>
</ion-toggle>

可以找到Plunker here。

享受。

Answer 2

我也尝试了这个没有任何成功我最接近的解决方案是在切换按钮的左侧放置一个no / yes文本，如下所示：

代码示例的链接：http://play.ionic.io/app/f3ad6568b33c

实际代码： HTML：

    <div class="toggle-wrapper">
        <span class="toggle-question">Text question here?</span>
        <ion-toggle class="meds-toggle"
                    toggle-class="toggle-energized"
                    ng-model="customText"
                    ng-checked="customText">
          <div class="toggle-text">{{customText ? "YES" : "NO"}}</div>
        </ion-toggle>

  </div>

JS： //这是我控制器里面的var $ scope.customText = false;

CSS：

#meds-refund-form .toggle-wrapper {
  display: inline-block;
  width: 100%;
  margin-bottom: -20px;

}

  .toggle-question {
    font-size: $default-font-size -3;
    float: left;
    margin: 10px;
  }

    .toggle-text {
    width: 10%;
    color: $bright-yellow;

  }

    .meds-toggle {
    margin: 10px;
    width: 5%;
    float: right;
    border: none;
    height: 50px;
  }

Answer 3

查看source code，这似乎不可能。值得注意的是，在切换按钮中没有用于粘贴文本的选项，并且唯一的transclude标记也与切换按钮无关。您当然可以自己编写代码并自行完成，但我认为它不值得。

Answer 4

我更新了答案中概述的解决方案以支持Ionic 1.0.3。可以找到Plunker here

HTML示例下面显示了使用ng-disabled属性。

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme">
    Simple Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme" ng-disabled="true">
    Disabled Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text="online;offline"  ng-model="customText" toggle-class="toggle-my-theme">
    Custom text: <b>{{ customText || false }}</b>
  </ion-toggle>
  <ion-toggle ng-model="customText" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

Answer 5

我找到了更好的解决方案...

<ion-toggle></ion-toggle>

使用CSS代码：

ion-toggle[aria-checked="false"]{
   position: relative;
   width: 70px;
  &::before {
    position: absolute;
    content: "BACK";
    font-size: 10px;
    line-height: 31px;
  }
  &::after {
    position: absolute;
    content: "";
  }
 }
 ion-toggle[aria-checked="true"]{
  position: relative;
  width: 70px;
  &::before {
    position: absolute;
    content: "";
  }
 &::after {
   position: absolute;
   content: "FRONT";
   font-size: 10px;
   line-height: 31px;
   top: 0;
   left: 3px;
   color: #fff;
 }
}

Answer 6

尝试了 Ishita Ray 发布的解决方案，但我不得不调整它，所以我将在此处包含 css：

ion-toggle {
    width: 100px;
    margin-bottom: 6px;
    position: relative;
    color: $rivly-white;
    font-size: 15px;
    line-height: 31px;

    --background: #92949c;
    --background-checked: #556ee6;

    --handle-background: #ffffff;
    --handle-background-checked: #ffffff;
}

ion-toggle[aria-checked="false"]{

   &::after {
    position: absolute;
    content: "offline";
    top: 0;
    right: 6px;
   }
}

ion-toggle[aria-checked="true"]{

  &::after {
    position: absolute;
    content: "online";
    top: 0;
    left: 6px;
  }
}

如何在离子切换中放置文本

6 个答案: