[AngularJS]ngClass

AngularJS 中如果要使用動態的 HTML class 第一想法都是用 {{ xxx }} 的方式放在 HTML 預設的 class 中，像：

<div class="{{customClass}}">{{name}}</div>

但這樣的缺點是，瀏覽器一開始會找不到 class 內容，而且 HTML 也不符合 W3C，為了因應這個狀況 AngularJS 中可以透過 ng-class 來支援動態的 HTML class。

範例

<!-- 利用 ng-init 設定變數 -->
<div ng-init="name='Johnson'; red='red'; blue='blue'; font='font';">
    <!-- 支援陣列 -->
    <div ng-class="[red, font]">{{name}}</div>
    <!-- 直接使用變數 -->
    <div ng-class="blue">{{name}}</div>
</div>