如何有條件地應用 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中文網其他相關文章！