替换 md-select 分隔符

Question

When md-select is used with multiple option, and multiple options are selected it separates the them using commas. I want to apply custom styling to the selected options which are being displayed and therefore want to get rid of the automatically added comma characters.
I checked this stackoverflow question but it is not working for me, the accepted answer, targets those characters(ie commas) by using a pseudo selector :after but the template code which md-select generates for my code is not able to be targeted by this pseudo selector :after , the reason for that is the commas are not a part of md-text 's content.

Below is the generated template code which md-select value is selected

<md-select-value class="md-select-value" id="select_value_label_62"><span><div class="md-text ng-binding">
Option1
</div>, <div class="md-text ng-binding">
Option2
</div>, <div class="md-text ng-binding">
Option3
</div></span><span class="md-select-icon" aria-hidden="true"></span></md-select-value>

I want to get rid of the commas placed after ending div tags. The commas are not wrapped in any html tag with which I can target them and that makes me stuck in this situation since I cannot style them in anyway using CSS.
Their only wrapper tag is md-select-value and this cannot help in targeting those sparsely placed commas.
Any help is appreciated. Thanks!

Answer 1

You can use the md-selected-text API (demo from the docs ). Note that there is also an API for md-selected-html .

Here's a working example using the |separator char with md-selected-text .