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>真实时保持浮动标签的方式进入ctrl.selectedVegetables.length逻辑（我假设自定义指令需要md-自动完成控制器并将逻辑注入其中可以做到这一点，直到这个方法由角度材料团队自己开发），但是这里有如何将浮动标签放在芯片之前，这导致了更好的用户体验：

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

更新了bin：bLNzKg

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

1 个答案: