角材料-在md-select Multiple选项中更改分隔符 [英] Angular-material - Change separator in md-select multiple option

问题描述

我的表单中有一个带有多个选项的md-select(与Angular Material中的 demo相同)网站).它在其输入字段中显示了逗号分隔的所选选项列表.有什么办法可以改变分隔符吗?(例如，将逗号更改为星号或其他UTF-8字符).

I have an md-select in my form with multiple options (same as demo in Angular Material site). It shows a comma separated list of selected options in its input field. Is there any way to change separator? (for example change comma to star or another UTF-8 character).

推荐答案

您可以使用纯CSS进行操作.您应该使用 visibility:折叠隐藏逗号，然后，可以使用:after 或:before 伪元素添加Unicode图标.

You can do something with pure CSS. You should hide the commas using visibility: collapse and after that, you can add a Unicode icon with :after or :before pseudo-element.

PLUNKER

HTML

<md-select class="my-select" ng-model="vm.selectedItem" multiple>
  <md-option ng-value="item.id" ng-repeat="item in vm.items">{{ item.name }}</md-option>
</md-select>

CSS

.my-select[multiple] .md-select-value span:first-child {
  visibility: collapse;
}

.my-select[multiple] .md-select-value .md-text {
  display: inline-block !important;
  visibility: visible;
}

.my-select[multiple] .md-select-value .md-text:not(:last-child):after {
  content: '\2605'; /* star */
  margin: 0 -5px 0 5px;
}

---

您会找到一个字形列表.
另外，您可以添加带有CSS的超赞图标想要.

这篇关于角材料-在md-select Multiple选项中更改分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！