Angular-material - 更改分隔符在md中選擇多個選項

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 .md-select-value span:first-child { 
    visibility: collapse; 
} 

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

.my-select .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。