三類 ng-ng 表示式

Angular 支援 ng-class 指令中的三種表示式。

1.字串

<span ng-class="MyClass">Sample Text</span>

指定求值為字串的表示式會告訴 Angular 將其視為$ scope 變數。Angular 將檢查$ scope 並查詢名為 MyClass 的變數。MyClass 中包含的任何文字都將成為應用於此 <span> 的實際類名。你可以通過用空格分隔每個類來指定多個類。

在你的控制器中，你可能有一個如下所示的定義：

$scope.MyClass = "bold-red deleted error";

Angular 將評估表示式 MyClass 並找到$ scope 定義。它將把“bold-red”，deleted 和 error 三個類應用於 <span> 元素。

以這種方式指定類可以讓你輕鬆更改控制器中的類定義。例如，你可能需要根據其他使用者互動或從伺服器載入的新資料更改類。此外，如果要評估很多表示式，可以在定義 $scope 變數中類的最終列表的函式中執行此操作。這比嘗試將許多評估壓縮到 HTML 模板中的 ng-class 屬性更容易。

2.物件

這是使用 ng-class 定義類的最常用方法，因為它可以輕鬆地指定用於確定要使用哪個類的計算。

指定包含鍵值對的物件。關鍵是如果值（條件）計算為 true，將應用的類名。

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3.陣列

求值為陣列的表示式允許你使用字串組合 （請參閱上面的#1）和條件物件 （上面的#2）。

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

這將建立一個繫結到範圍變數 UserStyle 的文字輸入欄位，該欄位允許使用者鍵入任何類名。這些將在使用者輸入時動態應用於 <p> 元素。此外，使用者可以單擊與 warning 範圍變數資料繫結的核取方塊。這也將動態應用於 <p> 元素。