Question

我的表单中有一个md-select，有多个选项（与demo in Angular Material site相同）。它在输入字段中显示以逗号分隔的所选选项列表。有没有办法改变分隔符？（例如，将逗号更改为星号或其他UTF-8字符）。

Answer 1

你可以用纯CSS做点什么。您应该使用visibility: collapse隐藏逗号，之后，您可以添加带有:after或:before伪元素的Unicode图标。

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;
}

你可以使用list of Glyphs。
此外，如果需要，您可以add a font-awesome icon with css。

Angular-material - 在md-select multiple选项中更改分隔符

1 个答案: