Material AngularJS 中带有浮动标签的 md-chips

Question

我需要在带有浮动标签的表单上有一个 md-chips。

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

<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>s 逻辑来在ctrl.selectedVegetables.length 真实时保持浮动标签（我假设一个自定义指令需要 md-autocomplete 的控制器并将逻辑注入其中可以做到这一点，直到这种方法是由 angular-material 团队自己开发的），但这里是如何将浮动标签放置在芯片之前，从而产生更体面的用户体验：

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

更新的垃圾箱：bLNzKg