Labelling a Toggle

ionic-v1
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?

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.