具有商品浮动标签和设置输入值的隐形输入标签

在this sample我希望电子邮件标签在电子邮件输入上方可见。看起来如果我开始编辑输入数据。具有商品浮动标签和设置输入值的隐形输入标签

我在这里做错了什么？

<label class="item item-input item-floating-label"> 
    <span class="input-label">Email</span> 
    <input type="email" value="[email protected]"> 
</label>

来源

2015-03-03 0tto

你有没有想出解决办法？我遇到了同样的问题。 – jmcopeland 2015-05-26 21:59:05

不，我认为有人必须就此向离子提交问题。 – 0tto 2015-05-27 09:01:59

item-floating-label类在用户输入字段中键入动画标签。请参阅文档了解更多详情。

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

为了您的要求，始终显示上面输入字段的标签，你必须使用item-stacked-label

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

来源

2015-03-03 15:59:24

感谢您的回复，但我不同意。 “项目堆叠标签”是一种具有不同行为的独立类型。我希望控件能够作为“项目浮动标签”工作，但也支持已设置值的情况。请与“Light主题”下面的[this]（http://www.google.com/design/spec/fone-text-text-fields.html#text-fields-floating-labels）进行比较，这里有一个名为“Normal with输入文字+标签“。这就是我期望的样子。 – 0tto 2015-03-09 11:46:01

随着NG-模型的价值代替它已经预期行为。所以，你的代码更改

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

，并添加像在你的控制器

来源

2015-06-04 10:27:35 JanP

设置占位符相同的文字作为标签下面。在这种情况下，placeholder="Email"。浮动项目标签以这种方式工作..直到填充字段，标签将不可见，而是占位符将可见。就像你在字段中输入的那样，标签就会出现。动画很时尚而且很漂亮。（区分大小写）

来源

2015-08-10 05:21:52

我有使用AppGyver Supersonic的类似问题。我解决了控制我的input-label的has-input类使用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>

来源

2016-01-25 16:05:22

具有商品浮动标签和设置输入值的隐形输入标签

回答

相关问题