在使用原生js時，動態的控制樣式的思路就是更換class，而在angularjs中ng-class指令使這一操作變得十分簡單。

1.通過雙向資料繫結

demo1

js:

fonction changeClass () {
    $scope.className = "change";
}

html:
<div ng-class="{{className}}" ></div>

css:
.change {
    color:#f00;
}

這種方式雖然不推薦使用，但是語法上是沒有任何問題的，因為在controller中，我們一般寫的都是js程式碼，與控制樣式分離開來，而且這樣也必然要觸發一些改變樣式的程式碼。

例如：某個值為真顯示樣式1，為假顯示樣式2，就得在controller裡做一些判斷，這樣做的缺點就是讓程式碼的層次關係不清晰。

2.字串真假
當某個功能是根據真假顯示兩種不同的樣式，這種方法最方便了。

demo2

js :
function changeClass () {
    $scope.className = true; //或false
}

html :
<div ng-class="{true:'class1',false:'class2'}[className]"></div>

當className為真時使用樣式1，為假時使用樣式2.
這樣子就會清晰很多，也十分好用。但如果有多個樣式要切換該怎麼辦呢。

3.鍵值對方式
這種方式就是對於一個div要更換不同的樣式，一般多於兩個以上。

demo3

js :
function changeClass () {
    $scope.redClass = "red";
    $scope.yellowClass = "yellow";
    $scope.greenClass = "green";
}

html:
<div ng-class="{'red:redClass,'yellow':yellowClass,'green':greenClass}"></div>

css:
.red{...}
.yellow{...
 
}
.green{...}

第三種方法要注意一點就是，如果多個樣式都為true，優先順序根據寫入順序，展示排在最後的樣式。dome3中如果redClass,yellowClass,greenClass都為真，則優先顯示green的樣式,以此類推。

以上三種方法都可以實現動態樣式，根據個人習慣選擇即可。