AngularJS TIPS
交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)
ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。
ng-class-even
/ng-class-odd
ディレクティブは、別稿「TIPS:要素のスタイルクラスを操作するには?」でも紹介したng-class
ディレクティブの特殊型です。ng-repeat
ディレクティブとセットで利用することを前提としており、奇数行(ng-class-odd
)/偶数行(ng-class-even
)でのみスタイルを適用します。ng-repeat
ディレクティブについては、別稿「TIPS:配列の内容を順に出力するには?」(※後日公開予定)を参照してください。
例えば以下のサンプルでは、記事情報をテーブル表示する際に、交互に異なるスタイルを割り当てています。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<style>
.table-even {
color: #f00;
background-color: #ffc;
}
.table-odd {
color: #00f;
background-color: #cff;
}
</style>
</head>
<body ng-controller="MyController">
<table class="table">
<tr>
<th>タイトル</th><th>著者</th><th>公開日</th>
</tr>
<tr ng-repeat="article in articles"
ng-class-even="'table-even'" ng-class-odd="'table-odd'">
<td><a ng-href="{{article.url}}">{{article.title}}</a></td>
<td>{{article.author}}</td>
<td>{{article.released | date}}</td>
<td>{{book.published | date: 'yyyy年MM月dd日'}}</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="i18n/angular-locale_ja-jp.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.articles = [
{
url: 'https://www.buildinsider.net/web/jqueryref',
title: 'jQuery逆引きリファレンス',
author: 'WINGSプロジェクト',
released: new Date(2015, 8, 1)
……中略……
];
}]);
</script>
</body>
</html>
|
サンプル全体はこちらからダウンロード・実行できる。
ng-class-even
/ng-class-odd
ディレクティブの用法は、ほぼng-class
ディレクティブに準じます。例では、文字列を指定していますが、空白区切りの文字列、配列などでの指定も可能です。
処理対象:コレクション カテゴリ:基本
処理対象:繰り返し処理 カテゴリ:基本
処理対象:ディレクティブ(Directive) カテゴリ:基本
API:ngClass(ng-class)|ngClassEven(ng-class-even)|ngClassOdd(ng-class-odd)|ng-repeat(ngRepeat) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)
※以下では、本稿の前後を合わせて5回分(第29回~第33回)のみ表示しています。
連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。
30. 要素のスタイルクラスを操作するには?(ng-class)
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
31. 【現在、表示中】≫ 交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)
ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。
33. ng-repeat要素でさまざまな繰り返しを表現するには?(ng-repeat)
ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ(連想配列)」「複数の要素セット」の内容を順に処理して出力する方法を説明。