CODEWITHSUNDEEP
angularjsangularjs-materialmd-select
Masroor
Masroor

Reputation: 1604

Replace md-select separator character

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(i.e 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!

Upvotes: 0

Views: 255

Answers (1)

Splaktar
Splaktar

Reputation: 5894

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.

Upvotes: 0

Related Questions