角度材料 - md-select複数オプションのセパレータを変更

Question

私は複数のオプションを持つフォームでmd-selectを持っています（demo in Angular Material siteと同じ）。入力フィールドに選択したオプションのカンマ区切りのリストを表示します。セパレータを変更する方法はありますか？ （たとえば、カンマをスターまたは別のutf-8文字に変更する）。

Answer 1

純粋なCSSを使用して純粋なものを実現できます。あなたはvisibility: collapseを使用してカンマを非表示にしてから、:afterまたは:before疑似要素を含むユニコードアイコンを追加できます。

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もあります。