Labelling a Toggle


#1

Okay, so I’m really stuck here. The docs show using a “toggle” with actual HTML. As discussed a few times here, the “best” way is to use the Ionic provided directive <toggle>.

Using <toggle> works great. Except, I can’t figure out how to apply the actual label to it to save my life.

See example (ignore the funky formatting problem with header - don’t care about that) : UPDATE LINK : http://plnkr.co/edit/7RbDfobcwYyoRHc0ZRm8?p=preview

I’ve shown toggles with raw html and 3 different versions using the directive. I can’t apply a nice label at all. I’ve looked at the raw code as well and find nothing that indicates what attribute to use to assign the label.

Any ideas?


Text in the toggle
#2

Just to add to this, I would like it so you can have the text IN the toggle

e.g.

[Hot | Cold]

Is that possible (or could it be possible). I couldn’t get that to work either but its a fairly regular toggle use in apps.

Thanks!


#3

I finally solved it:

<div class="item item-toggle">
    <toggle ng-model="fd.textInfo.sendText"></toggle>
    Send Invitation By Text?
</div>

Updated plunker to show the solution.