防止角度材质选择列表标签动画

Question

我目前正在使用angular material的选择列表，但在选择时不需要标签动画。我选择输入顶部的标签总是出现在您选择之后。

我可以使用普通文本输入

    <md-input-container class="md-input-has-placeholder">
       <label>Name</label>
       <input type="text"/>
    </md-input-container>

然而，这适用于select lists（链接到选择列表的角度材料文档）。我无法让what is happening标签保持在选择输入的顶部。

这是我目前的代码

<md-input-container flex="auto" flex="50" class="md-hue-3 md-input-has-placeholder">

 <label>What is happening ?</label>

 <md-select ng-model="$ctrl.alert.effect" class="md-hue-3 ng-not-empty" name="what">
    <md-optgroup label="Select type">
            <md-option ng-repeat="effect in $ctrl.effects">{{effect.name}}</md-option>
    </md-optgroup>
  </md-select>
 </md-input-container>

动画很酷，但我只想要一个正常的输入标签。

这是我为了工作而创建的hack，然后涉及在sass中编写父选择器以进行输入活动..这对于简单的事情来说是一团糟

<div layout="row">
    <div layout="column" layout-fill>

        <label>What is happening ?</label>

             <md-input-container flex="auto" flex="50" class="md-hue-3">

                  <md-select ng-model="$ctrl.alert.effect" class="md-hue-3" name="what" >
                        <md-optgroup label="Select alert type">
                            <md-option ng-repeat="effect in $ctrl.effects">{{effect.name}}</md-option>
                        </md-optgroup>
                  </md-select>

              </md-input-container>
       </div>
  </div>

Answer 1

有一种简单的方法（如果我帮你做对）

如果要禁用标签动画，只需将其添加到您的css：

md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
   -webkit-transform: none;
   transform: none;
}

Answer 2

不幸的是，由于不支持此选项，因此没有简单的方法。请参阅this bug和this post

Answer 3

您可以使用属性 appearance =“ standard” 将 mat-select 包装到 mat-form-field ，以防止占位符和标签出现动画。 例如：

<mat-form-field appearance="standard">
  <mat-select placeholder="set option">
    <mat-option>Option 1</mat-option>
  </mat-select>
</mat-form-field>