Question

在this sample中，我希望电子邮件标签在电子邮件输入上方可见。如果我开始编辑输入数据，则会出现。

我在这里做错了吗？

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

Answer 1

使用ng-model代替值，它将具有预期的行为。所以将代码更改为

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

并在控制器中添加以下内容

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

Answer 2

使用AppGyver Supersonic我遇到了类似的问题。我解决了使用has-input控制input-label ng-class课程的问题，如下所示：

<label class="item item-input item-floating-label">
  <span class="input-label" ng-class="{'has-input': username}">Choose a username</span>
  <input type="text" placeholder="Choose a username" ng-model="username">
</label>

Answer 3

当用户在输入字段中键入时，item-floating-label类会为标签设置动画。有关详细信息，请参阅文档

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

要求您始终在输入字段上方显示标签，您必须使用item-stacked-label

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

Answer 4

使用与标签相同的文本设置占位符。在这种情况下placeholder="Email"。浮动项标签以这种方式工作。在填充字段之前，标签将不可见，而占位符将是可见的。就像你在字段中输入一样，标签就会出现。动画很流畅。只需确保文本相同。（区分大小写。）

具有项目浮动标签和设置输入值的不可见输入标签

4 个答案: