如何有條件地將 CSS 類別應用到 AngularJS 中的元素？

AngularJS 的條件類別應用

在 AngularJS 中，您可能會遇到需要根據某些條件有條件地將類別應用於元素的場景。以下是如何有效地實現這一目標。

問題：

考慮渲染為 ul 的元素數組，每個元素帶有 li 標籤。您在控制器上有一個 selectedIndex 屬性，並且想要在具有對應索引的 li 中新增一個類別。

解決方案：

1.使用ng-class：

AngularJS 提供了ng-class 指令，它允許您基於表達式動態應用程式類別。要將「selected」類別有條件地套用到具有 selectedIndex 的 li，您可以使用：

<li ng-class="{selected: $index == selectedIndex}">...</li>

2。使用ng:class:

（v1 之前的語法）

對於v1 之前的AngularJS 版本，您可以將ng:class 與計算結果的表達式一起使用直接指向類別名稱。例如：

<li ng:class="{true:'selected', false:''}[$index == selectedIndex]">...</li>

解決方案比較：

雖然兩種解決方案達到相同的結果，但功能不同：

• ng-class 接受一個對象，其中屬性名稱代表類別名稱，屬性值決定是否套用該類別。這允許更複雜的類別應用程式邏輯。
• ng:class 需要一個計算結果為特定類別名稱的表達式，並且在有條件地處理多個類別時不太靈活。

附加說明：

您也可以使用此技術將模型屬性對應到類別名稱，將 CSS 類別保留在控制器程式碼之外。例如：

<li ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]">...</li>

以上是如何有條件地將 CSS 類別應用到 AngularJS 中的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！