Matériau angulaire - Changer le séparateur dans l'option multiple md-select

Question

J'ai un md-select dans mon formulaire avec plusieurs options (identique à demo in Angular Material site). Il affiche une liste d'options sélectionnées séparées par des virgules dans son champ de saisie. Y a-t-il un moyen de changer le séparateur? (par exemple, changer la virgule en étoile ou un autre caractère utf-8).

Answer 1

Vous pouvez faire quelque chose avec pur avec CSS pur. Vous devez masquer les virgules en utilisant visibility: collapse et après cela, vous pouvez ajouter une icône Unicode avec :after ou :before pseudo élément.

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

---

Là, vous allez un list of Glyphs que vous pouvez utiliser. En outre, vous pouvez add a font-awesome icon with css si vous le souhaitez.