ng-class是什麼？

如果我們要使用angular在html中設定css樣式，我們可以使用ng-class這個指令。

改寫官方範例：

使用ng-model與ng-class綁定css名稱
http://jsbin.com/EtUKEFa/1/edit

http://docs.angularjs.org/api/ng.directive:ngClass
ng-class怎麼用？

介紹兩種情境下，使用ng-class的方法。

1. 針對指定區域，如果true就執行Ａ樣式，false就執行B樣式。

(1) 設定一個變數名稱，用來控制樣式的顯示
範例中，是在controller裡面，建立一個名稱為isActive的變數名稱。

function Ctrl($scope) { 
    $scope.isActive = true;
}

(2) 設定true和false的樣式，範例中設定兩個名稱為active和inactive的樣式

.active{
  color:red;
}
.inactive{
  color:blue;
}

(3) 將ng-class放在欲顯示的標籤中
{true: '樣式名稱1', false: '樣式名稱2}[控制變數]
如果變數isActive是true，執行名稱為style1的樣式。
如果變數isActive是false，則執行稱為style2的樣式。

<p ng-class="{true: 'active', false: 'inactive'}[isActive]">Hello World</p>

參考完整範例：
http://jsbin.com/ulAtAfE/1/edit

2. 針對指定區域，如果x變數等於true就執行Ａ樣式，y變數等於true也可以執行B樣式。

(1) 建立樣式是否顯示的控制變數，範例中建立兩個變數，並將內容預設為true

function Ctrl($scope) { 
    $scope.isActive1 = true;
    $scope.isActive2 = true;
}

(2) 建立樣式，範例中建立style1和style2兩個樣式

.style1{
  text-decoration: line-through;
}
.style2{
  color:blue;
}

(3) 在標籤中加入ng-class指令，並加入{’css名稱1‘：是否顯示,’css名稱2‘：是否顯示} 樣式中間以逗號區隔

<p ng-class="{'style1': isActive1, 'style2': isActive2}">Hello World</p>

參考完整範例：
http://jsbin.com/EsahuMu/1/edit

What angularjs expression syntax is this in ng-class
http://stackoverflow.com/questions/14735257/what-angularjs-expression-syntax-is-this-in-ng-class

細說Angular ng-class,讓controller更純潔
http://whitewolfblog.blog.51cto.com/3973901/1206484

angular ng-class if-else expression
http://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression

ng-class-odd="'odd'" ng-class-even的基本範例
http://jsfiddle.net/api/post/library/pure/

Angular ng-class 製作動畫 DOM 的出現/消失效果
http://deathhell1121.blogspot.tw/2013/10/angular-ng-class-dom.html

http://jsfiddle.net/razh/SSHYK/

改寫範例：
http://jsbin.com/uteheVO/1/edit

來源：h<ttp://abgne.tw/angularjs/angularjs-getting-stared/ngclasseven-ngclassodd.html>

[AngularJS] ng-class 條件判斷
http://adz.visionbundles.com/posts/72633-angularjs-ng-class-condition-judgement

[AngularJS]AngularJS 入門教學 - ngCalss
http://abgne.tw/angularjs/angularjs-getting-stared/ngcalss.html

進階用法

ng-class="{'none':true,'nav-{{$index+1}}':true}"





ng-class="{'class1': someValue == 1, 'class2': someValue == 2, 
'class3': someValue == 3"

參考:

http://stackoverflow.com/questions/18891534/is-there-a-way-for-me-to-set-the-class-of-an-object-using-the-notation-in-angu/18891605#18891605