2017-05-08 28 views
0

我有一個包含各種文本值的UI角度選擇下拉菜單。使用CSS我在每個值的左邊添加了字體超棒的圖標。我想在下拉列表中的「全部」選項左側添加特定的字體超讚圖標,但我無法定位特定的下拉選項。不知道這是否可以使用CSS完成,或者如果我需要使用JS以某種方式定位它。在任何幫助將不勝感激,謝謝。UI選擇下拉角 - 無法定位第一個下拉選擇添加特定的CSS

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> 
+0

是您的選擇中的所有選項選項標籤嗎? – Basilf

回答

1

沒有看到生成的HTML/CSS我不知道究竟是如何將其應用到你的代碼,但也有針對使用pseudo selectors CSS單一元素的多種方式。我期望你需要的是:

:第一個孩子一組兄弟元素中的第一個元素。

這將只會選擇它的父項的第一個子元素。用這個簡單地應用你的CSS。

在其他情況下,如果所需元素的位置未知,則可以使用ng-class在選項等於特定值時應用類。然後針對該類的元素。

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

納克級將不會爲你工作,據我所知UI的選擇具有應用的一類錯誤:

1

您可以使用此代碼應用的特定樣式的第一個項目UI的選擇匹配。因此,通過檢查項目索引是否爲0來應用內聯樣式的圖標應該可以工作0

相關問題