How to add toggle to input field?

ionic-v1
1

I’d like to add a toggle to show/hide the password. Something like this:

The problem is that the password and the toggle are both <label>s, and it doesn’t seem reasonable to have a <label> within another <label>.

Any ideas? Codepen would be appreciated.

 <!-- Password -->
 <label class="item item-input item-stacked-label">
   <span class="input-label">Password</span>
   <input type="{{ user.showPassword ? 'text' : 'password'}}"
          ng-model="user.password">
 </label>

 <!-- Toggle -->
 <label class="toggle">
   <input type="checkbox" ng-model="user.showPassword">
   <div class="track">
     <div class="handle"></div>
   </div>
 </label>
2

I solved it using two inputs and ng-if:


<label class="item item-input item-stacked-label">
  <span class="input-label">Senha</span>
  <input type="text" ng-if="showPasswordIsChecked" name="password" ng-model="userModel.password" required>
  <input type="password" ng-if="!showPasswordIsChecked" name="password" ng-model="userModel.password" required>
</label>

<ion-checkbox ng-model="showPasswordIsChecked">Show password</ion-checkbox>

You can check it on codepen http://codepen.io/felquis/pen/OPdaqK

Hope it help you.