How can I place text inside an ion-toggle


Current I have a ion-toggle that looks like this

enter image description here

I want to do this

enter image description here

Is there anyway to make this happen? I read somewhere I could use ng-true-value and ng-false-value but that doesnt seem to do what I am looking for


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-text"online;offline" ng-model"customText">
  Custom text: <b>{{ customText || false }}</b>

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

Plunker can be found here.


Answered By – null

Leave a Comment