首頁 > web前端 > css教學 > 如何有條件地應用 AngularJS 中的類別?

如何有條件地應用 AngularJS 中的類別?

Susan Sarandon
發布: 2024-12-16 07:43:11
原創
979 人瀏覽過

How Can I Conditionally Apply Classes in AngularJS?

AngularJS 中條件應用類別的優雅解決方案

顯示元素數組時,您可能會遇到需要突出顯示基於特定元素的情況在一個財產上。在 AngularJS 中,類別的這種條件應用可以透過多種方式來實現。

一個簡單的解決方案,雖然並不理想,但它是手動複製清單元素 (li) 並向與所選元素對應的類別添加一個類別指數。不過,AngularJS 提供了更複雜的方法來實現此任務。

基於表達式的類別賦值

要直接向帶有selectedIndex 索引的li 添加類,您可以在ng-class 指令中使用條件表達式:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"
登入後複製

此表達式的計算結果為如果當前索引與selectedIndex匹配,則為“selected”,否則為空字串。

基於物件的類別映射

較新的語法允許您根據返回物件的表達式:

ng-class="{selected: $index==selectedIndex}"
登入後複製

在這種情況下,「selected」屬性將作為類別應用,如果當前索引與selectedIndex 相符。

屬性到類別名稱映射

為了更靈活的方法,您可以將模型屬性直接對應到類別名稱:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
登入後複製

此表達式使用user.role 屬性來決定要套用哪個類別。例如,如果使用者的角色是“admin”,則“enabled”類別將會新增到元素中。

以上是如何有條件地應用 AngularJS 中的類別?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板