Invisible input-label with item-floating-label and set input value

Question

Invisible input-label with item-floating-label and set input value

In this sample I expected the Email label to be visible above the email input. It appears if I start to edit the input data.

Am I doing something wrong here?

<label class="item item-input item-floating-label">
  <span class="input-label">Email</span>
  <input type="email" value="me@example.com">
</label>

ionic-framework

Answer 1

With ng-model in stead of value it will have the expected behaviour. So change your code to

<label class="item item-input item-floating-label">
  <span class="input-label">Email</span>
  <input type="email" ng-model="account.email">
</label>

and add something like the following in your controller

$scope.account = {
    email: 'me@example.com'
};

Answer 2

The item-floating-label class animates the label as the user types in the input field. Refer documentation for more details.

http://ionicframework.com/docs/components/#forms-floating-labels

For your requirement to always show the label above the input field, you have to use the item-stacked-label

http://ionicframework.com/docs/components/#forms-stacked-labels

Answer 3

Set the placeholder with the same text as the label. In this case placeholder="Email". The Floating item label works this way.. Until the field is filled, the label will not be visible, instead the placeholder will be visible. Just as you type in the field, the label will appear.The animation is sleek and nice. Just make sure the text is same.(case sensitive.)