Javascript 如何在离子开关中放置文本

我有一个离子开关，看起来像这样

我想这样做

---

有没有办法让这一切发生？我在某个地方读到过，我可以使用ng真值和ng假值，但这似乎不符合我的要求

通过搜索，这似乎是不可能的。值得注意的是，切换按钮中没有粘贴文本的选项，唯一的转置标记也与切换按钮无关。当然，你可以自己编写代码，但我认为这不值得。

属性

ng true value

和

ng false value

用于在选中复选框时为

ng model

表达式提供特定的自定义值。ionic框架不使用它来显示切换中的文本

但这当然是可能的：）

下面是一个指令。在任何现有的

ion-toggle

上点击

ion-toggle文本

，就可以开始了。可以使用

ng真值

/

ng假值

属性或

属性设置开/关文本使用
离子切换文本
属性分隔的值。如果未提供文本，则默认为“开”和“关”


简单示例：{{Simple | | false}}
自定义文本：{{customText | | false}
文本值：{{textByValue | |'so false'}

可以找到普朗克

享受。
我也尝试过，但没有成功。我最近的解决方案是在切换按钮的左侧放置一个“否/是”文本，如下所示：



代码示例的链接：

实际代码：
HTML:

我更新了答案中概述的解决方案，以支持Ionic 1.0.3。我们可以找到普朗克

下面的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>


简单示例：{{Simple | | false}}
禁用的示例：{{simple | | false}}
自定义文本：{{customText | | false}
飞行模式
我找到了一个更好的解决方案

<ion-toggle></ion-toggle>

我的设计师做的。我不确定这是可能的还是可能的not@durron597，我只是加入了我的代码。当我在帮助别人时，没有必要投否决票。添加一个链接到你的代码是没有帮助的。现在，您已将代码添加到答案本身，我已删除downvote@Coding麦克·科丁顿，你好。。你能告诉我如何在ionic2中实现这一点吗？嗨。。您能告诉我如何在ionic2中实现这一点吗？@csharpnewbie您找到ionic2的相同解决方案了吗？我想在爱奥尼亚-3上有同样的功能。thanks@Punita-不，我没有。对不起，帮不了什么忙。这太好了！但值得注意的是，对于当前的Ionic（1.3.3），由于某种原因，切换不再具有动画效果（如果删除了Ionion toggle text指令，则会出现动画效果）。
#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;
  }

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

<ion-toggle></ion-toggle>

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