動態附加符號下拉選項

我在我的頁面上有一個下拉菜單，如果某些情況符合，我想在每個選項旁邊動態附加複選標記。當我嘗試以下操作時：動態附加符號下拉選項

<select> 
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span class="fa fa-check"></span></option> 
    </select>

這沒有奏效。沒有附加任何選項。我甚至嘗試了一個普通字符：

<select> 
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span>X</span></option> 
    </select>

無濟於事。儘管該特定請求是客戶的需求，我嘗試下面提供一個替代的解決方案：

<select> 
    <option *ngFor="let cl of classes; trackBy id" [ngClass]="{'is-active':cl.selectedStudent=true}">{{cl.label}}</option> 
    </select> 

.is-active { 
    background-color: yellow; 
}

這將突出黃色的選項。這也沒有用。然後，我終於試圖得到一個下拉選項，以突出顯示內聯樣式：

<select> 
    <option *ngFor="let cl of classes; trackBy id" style="background:yellow;">{{cl.label}}</option> 
    </select>

這也沒有工作。無論我做了什麼，我都無法提供任何形式的下拉菜單。有什麼我缺少的或你無法風格下拉選項？我在MacOS上使用Chrome。

來源

2017-09-21 dangerisgo

我可以如果你想使用angular來處理它，那麼它沒有任何幫助，但對於jquery而言，它會像$（'option'）。on（'click'，function（）{// code here}）; – Keith

您不能在<options>標記內使用innerHtml標記。但是替代顏色的解決方案應該可行。在您的特定示例中，您有拼寫錯誤（1等號），但僅突出顯示選項本身（當展開選項列表時）未選定值。你可能想使用選擇框的JS實現。以primeNg或ngx-bootstrap爲例。但是simpliest選項：

<option>{{cl.label + (cl.selectedStudent == true ? ' &#9745;' : '')}}</option>

https://www.w3schools.com/charsets/ref_utf_symbols.asp

來源

2017-09-21 18:07:36

儘管在初始加載時起作用（謝謝），但當爲該類選擇複選框（學生）時，它不會更新。如果模型更改，下拉選項會更新嗎？此外，選中標記必須是綠色的（另一個客戶要求）。我嘗試了一些primeNG（我們已經將它集成到項目中），雖然我可以獲得所有我想要的東西，但是我無法獲得有條件地顯示每個類的選項標記。我向他們展示了一個：僞選擇器之後，但他們需要基於selectedStudent var顯示。 – dangerisgo

請提供完整的代碼，作爲聲明'當爲該類選擇複選框（學生）時「對我而言並不清楚。抱歉。 –

對不起，這個下拉選擇一個班（在學校）。選擇課程時，學生名單將顯示在下拉框下方的網格中，每個學生名稱旁邊有一個複選框。 ngFor對於這個問題並沒有真正的相關性，但是如果你想看到這些代碼，我可以提供。如果用戶選擇了班級中的學生，下拉菜單中的班級名稱旁邊會出現複選標記。 – dangerisgo

內，您的選擇，我會用<span *ngIf="cl.selectedStudent == true" class="fa fa-check"></span>像：

<select> 
    <option *ngFor="let cl of classes; trackBy id">{{cl.label}}<span *ngIf="cl.selectedStudent == true" class="fa fa-check"></span></option> 
    </select>

我還問自己，如果使用trackBy是真的有必要

來源

2017-09-21 18:08:30 Kevin

動態附加符號下拉選項

回答

相關問題