雖然文章不長,但一樣有目錄喔

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 初學者筆記與教學 (新手入門課程 - 課後心得篇)

AngularJS 初學者筆記與教學 (七) - FormController 的表單驗證與資料檢查

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()