Angular-material - Изменить разделитель в md-выборе нескольких опций

У меня есть md-select в моей форме с несколькими параметрами (так же, как демонстрация на сайте Angular Material). Он показывает разделенный запятыми список выбранных опций в поле ввода. Есть ли способ изменить разделитель? (например, измените запятую на звездочку или другой символ UTF-8).


angularjs angularjs-material md-select
person hadi.mansouri    schedule 13.10.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать что-то с чистым CSS. Вы должны скрыть запятые, используя visibility: collapse, и после этого вы можете добавить значок Unicode с псевдоэлементом :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[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;
}

Вот вам список глифов, которые вы можете использовать.
Кроме того, вы можете добавить значок шрифта с помощью CSS если хотите.

person The.Bear    schedule 14.10.2017
comment
для меня сгенерированный код шаблона не имеет символа запятой в качестве содержимого для псевдоселектора :after, поэтому он не может нацеливаться на него с помощью селектора :after. - person Prime; 18.04.2020
comment
@Prime, не могли бы вы поделиться своей версией углового материала, чтобы я мог обновить свой ответ, если это возможно? - person The.Bear; 24.06.2020