Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngCalss

[ 日期： | 瀏覽：9,638 | 迴響：搶沙發 ]
範例 1

如果要用 AngularJS 來控制某個元素的 class 時，最簡單的方式就是使用 Angular 表達式(Angular Expressions)的方式將 Model 設定在元素的 class 屬性中。

例如：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
.red {
	color: red;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
</style>
 
<div class="well span4" style="margin-top:20px;" ng-init="cusClass='red';">
	<div class="{{ cusClass }}">男丁格爾 angular.js</div>
</div>

因為將 cusClass 設定為 'red'，所以看到紅色的字也是很正常的：
ngcalss-0

看到網頁始碼的話，它也變成 red 了：
ngcalss-1

不過如同在 AngularJS 入門教學 - ngHref 與 ngSrc 提過的，當瀏覽器在載入時就會想套用 class，但除了在載入的第一時間是找不到正確的 class 內容之外，同時也無法通過 W3C 的驗證。所以不建議用這樣帶有污染 class 的方式來使用，而建議改用 ng-class 的宣告式語法(Directives Syntax)方式。

ng-class 的使用方式一樣是很簡單，且它本身就支援 Angular 表達式(Angular Expressions)，所以剛剛的範例就能直接改成：

檢視原始碼 HTML
1
2
3

<div class="well span4" style="margin-top:20px;" ng-init="cusClass='red';">
	<div ng-class="cusClass">男丁格爾 angular.js</div>
</div>

一樣會套上相對應的 class 內容：
ngcalss-2

另外也能配合陣列來使用：

檢視原始碼 HTML
1
2
3

<div class="well span4" style="margin-top:20px;" ng-init="red='red';bold='';italic='italic';">
	<div ng-class="[red, bold, italic]">男丁格爾 angular.js</div>
</div>

筆者使用 ng-init 初始化了 3 個變數，不過 bold 是空字串，接著放到陣列中並丟給 ng-class 去判斷使用：
ngcalss-3

基本上若是陣列的話，它是直接把值用 join(' ') 的方式把內容組合成字串，所以就算加到了空字串也不會有任何效果的。那如果是搭配物件的話呢？

假設控制器中有一個物件及變數：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9

var Ctrl = function($scope){
	$scope.cssObj = { 
		useRed: 'red', 
		useBold: 'bold', 
		useItalic: 'italic'
	};
 
	$scope.selectd = 'useItalic';
};

然後 View：

檢視原始碼 HTML
1
2
3

<div class="well span4" style="margin-top:20px;" ng-controller="Ctrl">
	<div ng-class="cssObj[selectd]">男丁格爾 angular.js</div>
</div>

主要是使用 (key, value) 的方式，因此透過 selectd 可以從 cssObj 中取得相對的值，所以...
ngcalss-4

有別於使用陣列的結果，使用這種方式的話，基本上也是取出一個值而已，因此最多就是套上一個 class 效果。不過...嘿嘿嘿~AngularJS 來有提供另一種使用物件判斷的方式喔：

檢視原始碼 HTML
1
2
3
4
5
6

<div class="well span4" style="margin-top:20px;" ng-controller="Ctrl">
	<label><input type="checkbox" ng-model="useRed" style="margin:0;"> Red?</label>
	<label><input type="checkbox" ng-model="useBold" style="margin:0;"> Bold?</label>
	<label><input type="checkbox" ng-model="useItalic" style="margin:0;"> Italic?</label>
	<div ng-class="{ red: useRed, bold: useBold, italic: useItalic }">男丁格爾 angular.js</div>
</div>

這邊很特別的是，每個 key 所對應的值是一個 Model，而接下來將它們綁在勾選框上，所以值就是 true 或 false 的布林值，然後直接將它指定給 ng-class。

接下來瀏覽時，可以隨意勾選，同時也會立即的套上屬於 true 的樣式：
ngcalss-5

所以使用這種方式的話，樣式組合就會變的更豐富囉！最後也請各位試著產生一個陣列，然後搭配使用 ng-repeat 的方式來輸出，並判斷若是偶數筆資料則加上 .even 樣式；反之則加上 .odd 樣式吧！

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響