How can I place text inside an ion-toggle

The attributes ng-true-value and ng-false-value are to provide the ng-model expression a certain custom value when the checkbox is checked. The ionic framework doesn't use it to display text in the toggle.

But it is certainly possible :)

Below is a directive that does. Slap ion-toggle-text on any existing ion-toggle and you're good to go. On/off text can be set with either the ng-true-value/ng-false-value attributes or with a ; separated value with the ion-toggle-text attribute. If no text is provided it defaults to "on" & "off".

<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 can be found here.

Enjoy.

I also tried this without any success my nearest solution was placing a no/yes text at the left side of the toggle button like this:

Link for code sample: http://play.ionic.io/app/f3ad6568b33c

The actual code: 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: //This is a var inside my controller $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;
  }

Tried the solution Ishita Ray posted but I had to tweek it so I'll include the css here:

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

I found a better solution...

<ion-toggle></ion-toggle>

use the css code:

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