AngularJS 指令如何用於條件 CSS 樣式？

AngularJS 中的條件 CSS 樣式

AngularJS 提供了各種指令來有條件或動態應用 CSS 樣式。這些指令包括：

• ng-class: 當 CSS 樣式固定時使用。
• ng-style: 當 style 時使用值動態變化。
• ng-show 和ng-hide: 用於透過修改 CSS 顯示或隱藏元素。
• ng-if: 用於檢查單一條件並修改 DOM。
• ng-switch: 用於檢查多個條件並修改DOM.
• ng-disabled 和ng-readonly: 用於限製表單元素行為。
• ng-animate: 用於新增 CSS3 轉場和動畫。

有條件地套用樣式，Angular 透過 ng-model 將模型屬性綁定到 UI 元素。然後使用使用者輸入修改此屬性，進而觸發相關指令來更新 CSS 樣式。

Q1 範例：刪除項目

ng-class 是適合這種場景，其中 CSS 樣式在類別中捕獲。 ng-class 表達式可以是映射到布林值的類別名稱的字串、陣列或物件。對於選取的項目，可以套用「pending-delete」類別：

<div ng-repeat="item in items" ng-class="{ 'pending-delete': item.checked }">
  ... Item display content ...
  <input type="checkbox" ng-model="item.checked">
</div>

Q2 範例：使用者個性化

對於動態CSS 樣式，ng-style是一個更好的選擇。它採用一個表達式，該表達式的計算結果為映射到值的 CSS 樣式名稱的物件。例如，可以設定使用者選擇的背景顏色：

<div class="main-body" ng-style="{ color: myColor }">
  ...
  <input type="text" ng-model="myColor" placeholder="Enter a color name">
</div>

以上是AngularJS 指令如何用於條件 CSS 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！