Angular-material - 在md-select multiple選項中更改分隔符

Question

我的表單中有一個md-select，有多個選項（與Angular Material網站中的demo相同）。 它在輸入字段中顯示以逗號分隔的所選選項列表。 有沒有辦法改變分隔符？ （例如，將逗號更改為星號或其他UTF-8字符）。

Answer 1

你可以用純CSS做點什么。 您應該使用visibility: collapse隱藏逗號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;
}

---

你去了一個可以使用的字形列表 。
此外，如果需要，您可以使用css添加字體真棒圖標 。