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中文網其他相關文章!