javascript - Angular Material，存在值时禁用 float 标签

Question

基本上，当有值时，我想关闭 md-floating 标签(就像 Angular Material 中的动画占位符)。我在我的 CSS 中对自动搜索做了类似的事情。

我说如果自动搜索的input中有一个值关闭 float 标签。我无法让它与 md-chips 一起工作。它在键入时工作，但是一旦选择了 md-chip， float 标签就会返回，因为我没有键入任何值(请参见下图)。但是存在一个筹码值，所以如果存在筹码值，我不希望有 float 标签。

#parent-search-autocomplete{
    margin-bottom:0px;

  & > md-chips-wrap{
    & > md-input-container.md-input-has-value label:not(.md-no-float){
      display:none;
    }

  }
}

<form name="parentComponentForm">
<md-chips ng-model="$ctrl.selectedParent" md-autocomplete-snap
    md-transform-chip="$ctrl.transformChip($chip)"
    md-require-match="true"
    md-on-add="$ctrl.updateSelected($ctrl.selectedParent)"
    md-on-remove="$ctrl.updateSelected($ctrl.selectedParent)"
    md-max-chips="{{$ctrl.multiple ? 0 : 1}}">
    <md-autocomplete id="parent-search-autocomplete" flex required  md-input-name="parentComponentField" ng-disabled="$ctrl.disabled"
            md-input-minlength="2"
            md-input-maxlength="25"
            md-selected-item="$ctrl.newAsset.parentComponent"
            md-search-text="$ctrl.searchText"
            md-items="item in $ctrl.querySearch($ctrl.searchText)"
            md-item-text="item.display"
            md-floating-label="{{'PLACEHOLDER.PARENT-COMP-LOC' | translate}}"
            class="my-custom-input">
    <md-item-template>
        <span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
    <div ng-messages="parentComponentForm.parentComponentField.$error" style="color:red">
        <div ng-message="required">You
        <b>must</b>
        have a parent component.</div>
    </div>
</md-autocomplete>

<md-chip-template>
    <span>
        <strong>{{$chip.display}}</strong>
    </span>
</md-chip-template>
</md-chips>
</form>

Answer 1

如果您使用的是最新版本的 Angular Material ，您可以使用 floatLabel="never"

请参阅 SO 中的答案: Angular Material, disable floating label when value present