css - Material AngularJS 中带有 float 标签的 md-chips

Question

我需要在带有 float 标签的表单上放置一个 md-chips。

所以尝试使用 md-chips 内的自动完成功能和 md-floating-label，问题是 float 标签总是向前移动。

<md-chips >
   <md-autocomplete md-floating-label="Search for a vegetable">
        <span>{{item.name}}</span>
    </md-autocomplete>
    <md-chip-template>
        <span>{{$chip.name}}</span>
  </md-chip-template>
</md-chips>

You can check here how it is working now .

有谁知道把标签固定在 md-chips 开头的方法吗？或为我完成工作的指令。

Here a example with the expected result .

Answer 1

我不知道如何进入 <md-autocomplete> ctrl.selectedVegetables.length 时保持 float 标签向上的逻辑是真实的(我假设一个自定义指令需要 md-autocomplete 的 Controller 并将逻辑注入(inject)它可以做到这一点，直到这个方法是由 angular-material 团队自己开发的)，但是这里是你如何在之前放置 float 标签芯片，从而带来更体面的用户体验:

md-chips-wrap.md-chips {
  display: flex;
  flex-wrap: wrap;
}
md-chips-wrap > .md-chip-input-container {
  order: -1;
}

更新的 bin:bLNzKg