AngularJS中ng-class的用法

從今天開始寫博，記錄下本身技術發展的點滴吧。

1、什麼是ng-class

ng-class是AngularJS預設的一個指令(directive)，經過這個指令可以對html元素的類(class)進行動態地設置。

2、在什麼場景下用ng-class

在須要動態修改html元素的時候...因此其實這個問題等價於何時須要動態修改html元素的類？
在我的淺薄的編程經驗中......須要動態修改html元素的類的時候基本是須要改變html元素的「表現」的時候。
舉個栗子，在css中設置

.hidden{
    display:none;
}

那麼須要隱藏一個元素的時候，對元素添加hidden類便可
再舉個栗子，一個關閉按鈕，有兩種狀態，可用與不可用，那麼你能夠在css中設置

/* 正常的關閉按鈕 */
.btn-close{
    background-image:url(images/btn-close.png)
}
/* 不可用的關閉按鈕 */
.btn-close-disabled{
    background-image:url(images/btn-close-disabled.png)
}

這樣經過動態設置 btn-close 和 btn-close-disabled 兩個類，你就能夠方便地修改按鈕的外觀了，是否是很神奇，很牛X......扯遠了, 估計大神們已經在"呵呵"...回到正題

3、怎麼用ng-class

其實AngularJS官方給的API給出的例子很詳細，請戳這裏
能夠先看下Example中的style.css，定義了五種class

/* 對文本添加刪除線 */
.strike {
    text-decoration: line-through;
}
/* 加粗文本 */
.bold {
    font-weight: bold;
}
/* 文本字體設置爲紅色 */
.red {
    color: red;
}
/* 錯誤文本的樣式。紅色字體，黃色背景 */
.has-error {
    color: red;
    background-color: yellow;
}
/* 文本字體設置爲橘色 */
.orange {
    color: orange;
}

ng-class的用法就是在html元素中設置ng-class="expression"，這個expression(表達式)能夠爲string，object，array三種類型
Example中index.html中展現了ng-class的三種用法，分別來看一下

第一種，表達式爲object

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">
Map Syntax Example
</p>
<label>
  <input type="checkbox" ng-model="deleted"/>deleted (apply "strike" class)
</label>
<br>
<label>
  <input type="checkbox" ng-model="important"/>important (apply "bold" class)
</label>
<br>
<label>
  <input type="checkbox" ng-model="error"/>error (apply "has-error" class)
</label>

對象中的key-value對，key表示的是class的名稱，value表示的是該html元素是否有這個 calss， 若是value爲true，那麼html元素就屬於這個class，若是value爲false，那麼html元素就不屬於這個class。具體的html外觀表現就不截圖了，你們能夠本身試驗。
在元素的class比較多的時候。相比另外兩種，object類型的表達式就有優點。由於拼字符串是很煩的~

第二種，表達式爲string

<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red" aria-label="Type: bold strike red">

例子中將ng-class 綁定到了input的輸入值上。實際上能夠經過修改$scope.style的值設置ng-class。
這種方式的優勢就是簡單、粗暴。缺點是class多了，寫起來挺麻煩的

第三種，表達式爲array

<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red">
<br>
<input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2">
<br>
<input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3">
<br>

這裏array中的每一個元素都綁定了一個input的輸入值，實際上每一個元素都使用了string類型的值

<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike">
<br>
<label>
  <input type="checkbox" ng-model="warning"> warning (apply "orange" class)
</label>

array中元素能夠爲string 或者object，object中key-value對的規則同上。array類型仍是很強大的。。。

發現寫博客仍是蠻累人的，居然寫了一個小時....sign...