如何有效地應用條件類別來列出 AngularJS 中的項目？

AngularJS 中條件類應用的最佳實踐

在 AngularJS 中，可以透過多種方式實現將類別有條件地應用於元素。讓我們根據您的具體場景探索最佳的解決方案。

場景：數組呈現為無序列表，並且您希望向列表項添加一個類，索引為 selectedIndex 控制通過控制器上的 selectedIndex 屬性。

初始方法：

您目前正在手動複製清單項目程式碼並將該類別新增至清單項目標籤之一。雖然此方法有效，但它引入了不必要的重複。

解決方案1：有求值表達式的ng-class 指令

您可以在控制器中取代使用CSS 類別名稱，使用表達式動態設定類名。具體方法如下：

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

注意：由於此方法所需的評估機制，請使用帶有冒號的舊語法。

解決方案 2：ng -class 指令與條件物件

AngularJS 也支援將物件指派給ng 級指令。每個屬性名稱代表一個類別名稱，其值決定是否套用該類別。

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

附加說明：

雖然兩個解決方案實現相同的結果，但它們在功能上並不等同。解決方案 2 允許您將模型屬性對應到類別名稱，並將它們保留在控制器程式碼之外。這提供了更大的靈活性並提高了程式碼的可讀性。

以上是如何有效地應用條件類別來列出 AngularJS 中的項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！