雖然文章不長，但一樣有目錄喔
1. 直接在 controller 上綁定 class name
2. 使用 ng-class
3. 使用 ng-style
這次要介紹的是使用 AngularJS 改變 CSS Class 的方法
前端網頁常常會有個需求，就是需要動態變更 CSS 的樣式來達到動畫效果
或是需要動態變更 CSS 樣式的邏輯是寫在 js 裡面
以 jQuery 來說就是用 addClass() 跟 removeClass() 用來操作 CSS Class 的新增與移除
但在 AngularJS 來說，當然是要學著不要直接使用操作 DOM 的方式來達成囉
以下就針對在 AngularJS 中如何操作 CSS 樣式的幾種方式來做說明
直接在 controller 上綁定 class name
HTML :
<div ng-app="app" ng-controller="mycontroller as ctrl" >
<div class="{{ctrl.className}}">test</div>
<div>
JS :
angular.module("app",[]).controller("mycontroller",[function() {
this.className = "red";
}]);
CSS :
.red {
color: red;
}
結果如下 : (自行切換頁簽看結果)
這種方式雖然也是可以，但不是很推薦
原因就是這樣寫的話 controller 內就會含有 view 的 class 名稱
controller 應該是單純負責邏輯處理才對
使用 ng-class
AngularJS 提供了 ng-class 讓我們可以動態的變換 css class
ngc-class 可以用字串或物件(實字) 做為內容值，如果是字串就會直接套用 css 樣式
如果是物件，就會解讀物件裡的每個 key 值
判斷相對應的 value 值為 ture or false 來決定是要套用還是移除 class
使用方式大概有以下幾種，以下部分都是取自官網範例，等下再來看其他應用
https://docs.angularjs.org/api/ng/directive/ngClass
1. 使用Map Syntax繫結
使用物件的方式設定 ex : {strike: deleted, bold: important, red: error}
只要屬性值為 true 就會套用名稱的樣式
2. 使用String Syntax繫結
繫結到的值為 class name 就會套用樣式，當然也可以直接寫樣式名稱，但別忘了是輸入字串 'red'
ex : <p ng-class="'red'">Using Array Syntax</p>
3. 使用Array Syntax繫結
繫結到陣列中的值為 class name 就會被套用，當然也可以直接指定要套用的 class name
ex : ['bold', 'red', 'strike']
4. Array and Map Syntax 混合方式
使用陣列與地圖的混合方式 ex : [style4, {orange: warning}]
綜合兩者特性，一樣可直接換成樣式名稱，一樣屬性值為 true 就會套用 orange 這個 class
5. 使用Map Syntax 判斷 (2)
當 deleted 為 true 就會套用 true 的 'strike'
<p ng-class="{true: 'strike', false: 'bold'} [deleted]">Map Syntax Example</p>
除了官網範例之外的其他應用
a. ng-repeat 搭配 ng-class，ng-class 的套用邏輯在 controller 中
<style type="text/css">
div {
padding:5px;
}
.done {
background:red;
}
.pending {
background:blue;
}
</style>
<div ng-app="myapp">
<div ng-controller="mycontroller as ctrl">
<div ng-repeat="items in ctrl.notes">
<div ng-class="ctrl.getClass(items.done)">{{ items.label }}</div>
</div>
</div>
</div>
<style type="text/javascript">
angular.module("myapp",[]).controller("mycontroller",[function() {
var self = this;
self.notes = [
{ label : "test1", done: false },
{ label : "test2", done: true },
{ label : "test3", done: false }
];
self.getClass = function(status) {
return {
done : status,
pending : !status
}
}
}]);
</script>
結果如下 :
b. 用來做動態效果
官網的範例
自己寫一個類似的玩玩
比較進階的用法 : 使用 if 判斷式
這有點暫時用不到，先筆記一下有機會再來試試
來源 : http://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression
Use nested inline if-then statements (Ternary Operators)
<divng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">for example :
<divng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
...
</div>
以上是關於 ng-class 這個 directive 的相關應用方式
使用 ng-style
再來是另一種可改變樣式的 ng-style
他與 ng-class 的差別在於 ng-class 是改變 class name，ng-style 是改變 style 屬性
例如以下這個簡單的例子 :
<div ng-app="">
<input type="button" value="按一下" ng-click="mystyle={
fontSize : '36px',
color : 'blue',
textDecoration : 'underline'
}" />
<div ng-style="mystyle">測試一下</div>
</div>
結果就會如下 :
設定樣式的寫法跟直接用 js 設定 style 屬性一樣，必須把 - 拿掉，並且用駝峰式的寫法
document.getElementById(id).style.property=new style
請參考MDN : CSS Properties Reference
所以 font-size 就變成 fontSize， text-decoration 就變成 textDecoration
如果不使用這種駝峰式寫法的話，輸入就必須要換成字串形式，例如同樣的code 改成以下這樣
<div ng-app="">
<input type="button" value="按一下" ng-click="mystyle={
'font-size' : '36px',
'color' : 'blue',
'text-decoration' : 'underline'
}" />
<div ng-style="mystyle">測試一下</div>
</div>
兩種方式都可以
雖然 ng-style 寫法很直覺也很方便，但個人覺得還是使用 ng-class 統一把樣式放在 css 檔案維護比較好
AngularJS 學習筆記系列 : (依本人的上進心持續增加)
AngularJS 初學者筆記與教學 (一) - 使用方式、Expression、Controller、Module
AngularJS 初學者筆記與教學 (二) 內建的簡單指令之1 ng-click、ng-show、ng-hide
AngularJS 初學者筆記與教學 (三) - AngularJS 的載入流程與 ng-cloak 運作原理
AngularJS 初學者筆記與教學 (四) - 如何動態改變 CSS 樣式，使用 ng-class、ng-style
AngularJS 初學者筆記與教學 (五) - 繼續深入學習常用的 ng-repeat
AngularJS 初學者筆記與教學 (新手入門課程 - 課後心得篇)
AngularJS 初學者筆記與教學 (七) - FormController 的表單驗證與資料檢查
留言列表
CSS、Responsive Web Design (2)