当 ng-model 为空时，如何在 md-input-container 上有一个浮动标签答案

【问题标题】：How to have a floating label on md-input-container when ng-model is null当 ng-model 为空时，如何在 md-input-container 上有一个浮动标签
【发布时间】：2017-07-21 06:00:37
【问题描述】：

我想要实现的是：

或者这个：

当前代码：

<md-input-container  ng-if="!ctl.module.activeDate" placeholder = "NotSetted">
    <label>Activation Date</label>
    <md-datepicker ng-model="" disabled></md-datepicker>
</md-input-container>

此实现使用 Angular 材质。如果activeDate 是null，我检查ng-if，如果不是，我有另一个md-input-container 获得价值，这是一个“解决方法”解决方案，最好的方法是拥有所有这些逻辑在同一个md-input-container。

【问题讨论】：

标签： angularjs html web angular-material

【解决方案1】：

在输入控件中使用占位符（而不是在输入容器中）。不活动时使用ng-disabled 禁用控件。使用md-placeholder 在日期选择器中设置占位符。

<md-input-container  >
        <label>Activation Date</label>
         <md-datepicker  ng-model="ctl.mydate" 
                         ng-disabled="!ctl.module.activeDate" 
                         md-placeholder="Not setted"
          >
         </md-datepicker>
</md-input-container>

编辑：如果您想为启用/禁用状态设置不同的占位符，您可以使用角度表达式：

md-placeholder="{{ctl.module.activeDate?'Not setted':'Disabled'}}"

【讨论】：