1. 程式人生 > >AngularJS中ng-class的用法總結

AngularJS中ng-class的用法總結

一、什麼是ng-class

ng-class是AngularJS預設的一個指令(directive),通過這個指令能夠對html元素的類(class)進行動態地設定。

二、在什麼場景下用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......

三、怎麼用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型別還是很強大的。。。

物件陣列: <div ng-controller="firstController">
 
 <div ng-class="{true:'change1',false:'change2'}[className]"></div>
 
 
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className=true;
 
   })
</script>
我們如果在專案中可以靈活的運用這些指令,動態改變樣式就變得十分簡單,不用再繁瑣的用js操作dom,這樣會給我們帶來非常多的便利,我們在解決問題的時候能有更多的思路,這樣我們可以組合的使用這些指令來快速的解決一些比較苦惱的問題!