AngularJS 中如果要使用動態的 HTML class 第一想法都是用 {{ xxx }} 的方式放在 HTML 預設的 class 中，像：
1 | <div class="{{customClass}}">{{name}}</div> |
但這樣的缺點是，瀏覽器一開始會找不到 class 內容，而且 HTML 也不符合 W3C，為了因應這個狀況 AngularJS 中可以透過 ng-class 來支援動態的 HTML class。
範例
1 | <!-- 利用 ng-init 設定變數 --> |
2 | <div ng-init="name='Johnson'; red='red'; blue='blue'; font='font';"> |
3 | <!-- 支援陣列 --> |
4 | <div ng-class="[red, font]">{{name}}</div> |
5 | <!-- 直接使用變數 --> |
6 | <div ng-class="blue">{{name}}</div> |
7 | </div> |