[英]Angular-material - Change separator in md-select multiple option
I have an md-select in my form with multiple options (same as demo in Angular Material site ). 我的表单中有一个md-select,有多个选项(与Angular Material网站中的demo相同)。 It shows a comma separated list of selected options in its input field.
它在输入字段中显示以逗号分隔的所选选项列表。 Is there any way to change separator?
有没有办法改变分隔符? (for example change comma to star or another UTF-8 character).
(例如,将逗号更改为星号或其他UTF-8字符)。
You can do something with pure CSS. 你可以用纯CSS做点什么。 You should hide the commas using
visibility: collapse
and after that, you can add a Unicode icon with :after
or :before
pseudo-element. 您应该使用
visibility: collapse
隐藏逗号visibility: collapse
,之后,您可以使用:after
或:before
伪元素添加Unicode图标。
HTML 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 CSS
.my-select[multiple] .md-select-value span:first-child {
visibility: collapse;
}
.my-select[multiple] .md-select-value .md-text {
display: inline-block !important;
visibility: visible;
}
.my-select[multiple] .md-select-value .md-text:not(:last-child):after {
content: '\2605'; /* star */
margin: 0 -5px 0 5px;
}
There you go a list of Glyphs that you can use. 你去了一个可以使用的字形列表 。
Also, you can add a font-awesome icon with css if you want. 此外,如果需要,您可以使用css添加字体真棒图标 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.