如何在AngularUI-Select中自定义群组标签

Question

在Angularui-select(GitHub Link)中，如何自定义群组标签？

如图所示，列表按国家/地区分组，如何自定义组标签使其大于 selection 项目？

<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 class 定位如下：

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

您可以看到更新后的Plunkr here

Answer 2

我们有类似的需求，但我们不想为所有组更改此样式。

所以这是我们找到的解决方案：

将 class 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 class 瞧。

希望对大家有所帮助。

如何在AngularUI-Select中自定义群组标签

How to customize group label in Angular UI-Select

html

javascript

css

angularjs

angular-ui-select