Как настроить метку группы в Угловом UI-Select

Question

В Угловом ui-select (GitHub Link), как я могу настроить групповую метку?

Как показано на рисунке, список сгруппированы по странам, как я могу настроить ярлык группы таким образом, чтобы сделать его больше, то элементы выбора?

Plunker Example

<ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person"> 
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> 
<ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> 
    <div ng-bind-html="person.name | highlight: $select.search"></div> 
    <small> 
    email: {{person.email}} 
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> 
    </small> 
</ui-select-choices> 
</ui-select> 

Пример модифицируется с официального примера link.

Заранее спасибо.

Answer 1

я просто целевой класс CSS, который был привязан к группе по метке следующим образом:

.ui-select-choices-group-label { 
    font-size: 20px; 
} 

Вы можете увидеть обновленный Plunkr here

Answer 2

Мы подобную необходимость, но мы не хотим, чтобы изменить этот стиль для всех групп.

Так вот решение мы нашли:

Добавить класс biggerGroup к вашему ui-select-choices как в этом примере:

<ui-select-choices class="biggerGroup" group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> 

Добавьте это в файл .css:

.biggerGroup > .ui-select-choices-group > .ui-select-choices-group-label { 
    font-size: 20px; 
} 

сейчас , если вам нужно изменить стиль группы в своем выборе, просто добавьте этот класс biggerGroup и вуаля.

Надеюсь, это может помочь кому-то.