Question

我有一个包含各种文本值的角度的ui选择下拉列表。使用CSS我在每个值的左侧添加了字体真棒图标。我想在＆＃39; All＆＃39;的左侧添加一个特定的字体真棒图标。在下拉列表中选择，但我无法定位特定的下拉选项。不确定这是否可以仅使用CSS完成，或者我是否需要使用JS以某种方式定位它。在任何任何帮助中都将不胜感激，谢谢。

screenshot

                <div class="form-group">
                    <ui-select id="teamMemberType" ng-model="historyCtrl.queryParams.teamMemberType" theme="bootstrap" ng-change="historyCtrl.filterContent()">
                        <ui-select-match placeholder="Search">{{$select.selected.display}}</ui-select-match>
                        <ui-select-choices group-by="'group'" repeat="option.value as option in (historyCtrl.filters.options.teamMemberType | filter: $select.search) track by option.value">
                            <span id="created" ng-bind-html="option.display| highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                </div>

Answer 1

如果没有看到生成的HTML / CSS，我不确切知道如何将其应用于您的代码，但有多种方法可以使用pseudo selectors使用CSS定位单个元素。我期待你需要的是：

：first-child 一组兄弟元素中的第一个元素。

这只会选择作为父母的第一个孩子的元素。只需使用此功能即可应用您的CSS。

在其他情况下，如果所需元素的位置未知，则可以使用ng-class来应用类，如果该选项等于特定值。然后使用该类定位元素。

Answer 2

您可以使用以下代码将特定样式应用于第一项：

 <ui-select-match placeholder="Search" ng-style="{{$index==0}} && {'background-color':'green'}">{{$select.selected.display}}</ui-select-match>

只要知道ui-select在ui-select-match上应用类的错误，

ng-class将不适合你。因此，通过检查项索引是否为= 0

，应用图标的内联样式应该有效

UI选择下拉菜单角色 - 无法定位第一个下拉选项以添加特定的CSS

2 个答案: