Angular.jsでタブを作る

Angular.jsでfilterを使わずにタブっぽい処理を実装してみます。

サンプルコード

HTML

.tab-switchがタブの切り替え部分、.tab-bodyがタブのコンテンツ部分になります。

<div ng-controller="tab_ctrl">
	<div class="tab-switch">
		<div class="tab-switch-item" ng-repeat="switch in tabData" ng-click="switchClick($index)">{{switch.belong}}</div>
	</div>

	<div class="tab-body">
		<div class="tab-body-item" ng-repeat="body in tabData[view]['contents']">
			<span class="tab-body-item_name">{{body.name}}</span>
			<span class="tab-body-item_birthday">( {{body.birthday}} )</span>
		</div>
	</div>
</div>

CSS

.tab-switch-item {
	display: inline-block;
	margin: 10px;
	border: #cccccc 1px solid;
	border-radius: 3px;
	padding: 5px 8px;
	cursor: pointer;
}
.tab-body {
	margin: 10px;
}
.tab-body-item {
	margin-bottom: 10px;
	border-bottom: #000000 1px dotted;
	padding-bottom: 10px;
}
.tab-body-item_birthday {
	font-size: 13px;
}

JavaScript

angular.module('app', []).controller('tab_ctrl', function($scope) {
	// 表示するタブの番号
	$scope.view = 0;

	// タブクリック時の処理
	$scope.switchClick = function(index) {
		$scope.view = index;
	}

	// タブで使用するデータ
	$scope.tabData = [
		{
			"belong": "アイムエンタープライズ", // タブの切り替えに表示されるテキスト
			"contents": [
				{
					"name": "佳村 はるか",
					"birthday": "非公開"
				},
				～ 略 ～
				{
					"name": "早見 沙織",
					"birthday": "1991.5.29"
				}
			]
		},
		～ 略 ～
		{
			"belong": "大沢事務所",
			"contents": [
				{
					"name": "茅野 愛衣",
					"birthday": "1987.9.13"
				},
				～ 略 ～
				{
					"name": "花澤 香菜",
					"birthday": "1989.2.25"
				}
			]
		}
	];
});

$scope.viewの値を変更して、タブのコンテンツ内容を変更しています。
タブ切り替えのデモページ