Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngClassEven 與 ngClassOdd

範例 1

AngularJS 入門教學 - ngCalss 的作業是要使用 ng-repeatng-class 來做出隔行變色的效果。

一樣用筆者常用的海賊王的人物陣列:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
var Ctrl = function($scope){
	$scope.friends = [{
		name: '蒙其·D·魯夫', 
		reward: 400000000
	}
	// 略...
	}, {
		name: '布魯克', 
		reward: 33000000
	}];
};

然後簡單的 View:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
	.even {
		color: red;
	}
	.odd {
		color: blue;
	}
</style>
<div class="well span4" style="margin-top:20px;" ng-controller="Ctrl">
	<ul>
		<li ng-repeat="person in friends" ng-class="$index % 2 == 0 ? 'even' : 'odd';">{{ person.name }}</li>
	</ul>
</div>

要注意的是第一筆的 $index0 會被當成是偶數
ngclasseven-ngclassodd-0

不過像這種在執行類似 for 迴圈時常常會用到隔行要幹嘛的動作,因此 AngularJS 針對在 ng-repeat 中使用 ng-class 的部份多提供了 ng-class-evenng-class-odd 兩個特別的指令。

所以只要將有用到 ng-repeatli 那一段改成:

1
<li ng-repeat="person in friends" ng-class-even="'even'" ng-class-odd="'odd'">{{ person.name }}</li>

在使用 ng-class-evenng-class-odd 時要特別注意的是,它們都是接受 Angular 表達式(Angular Expressions)的,所以再指定值時,如果是字串的話,別忘了要多補上單引號或是雙引號

接著來瀏覽看看:
ngclasseven-ngclassodd-1

是不是也會隔行變色了呢?可是...不知道各位有沒有發現,它跟一開始變色的結果是反過來的呢!

沒錯...因為 AngularJS 所提供的 ng-class-odd 是把 $index & 1 為 0 的當做奇數;反之為 1 的是偶數!這段程式可以在 angular.js 的原始碼中看到:

檢視原始碼 JavaScript
1
2
3
var ngClassOddDirective = classDirective('Odd', 0);
 
var ngClassEvenDirective = classDirective('Even', 1);

接下來就請各位將 ul li 的部份改成使用 table,同時也別忘了加上隔行變色的效果喔!

範例 1

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

發表迴響