Angular-material - 在 md-select 多个选项中更改分隔符
Angular-material - Change separator in md-select multiple option
我的表单中有一个 md-select,其中包含多个选项(与 demo in Angular Material site 相同)。它在其输入字段中显示逗号分隔的 selected 选项列表。有没有办法改变分隔符? (例如,将逗号更改为星号或其他 UTF-8 字符)。
你可以用 pure CSS 做一些事情。您应该使用 visibility: collapse
隐藏逗号,然后,您可以使用 :after
或 :before
伪元素添加 Unicode 图标。
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: '05'; /* star */
margin: 0 -5px 0 5px;
}
这就是您可以使用的 list of Glyphs。
另外,如果你愿意,你可以add a font-awesome icon with css。
我的表单中有一个 md-select,其中包含多个选项(与 demo in Angular Material site 相同)。它在其输入字段中显示逗号分隔的 selected 选项列表。有没有办法改变分隔符? (例如,将逗号更改为星号或其他 UTF-8 字符)。
你可以用 pure CSS 做一些事情。您应该使用 visibility: collapse
隐藏逗号,然后,您可以使用 :after
或 :before
伪元素添加 Unicode 图标。
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: '05'; /* star */
margin: 0 -5px 0 5px;
}
这就是您可以使用的 list of Glyphs。
另外,如果你愿意,你可以add a font-awesome icon with css。