Angular.jsでリストのもっと見るボタンを実装する

Angular.jsでng-repeatで表示したリストのもっと見るボタンを実装してみます。

サンプルコード

HTML

<div ng-controller="vaList">
	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in actorData | limitTo: views: 0">
			<div class="va-list-item_name">{{actor.name}} <span class="va-list-item_belong">(所属:{{actor.belong}})</span></div>
			<div class="va-list-item_birthday">生年月日:{{actor.birthday}}</div>
		</li>
	</ul>

	<a href="" class="more" ng-click="moreClick()" ng-hide="views >= actorData.length">もっと見る</a>
</div>

CSS

.va-list-item {
	border-bottom: #999999 1px solid;
	padding: 20px;
}
.va-list-item_name {
	font-size: 16px;
}
.va-list-item_belong {
	font-size: 12px;
}
.va-list-item_birthday {
	font-size: 14px;
}

.more {
	display: inline-block;
	margin: 10px;
	border: #999999 1px solid;
	border-radius: 3px;
	padding: 7px 10px;
	color: #000000;
	text-decoration: none;
	background:#eeeeee;
}

JavaScript

angular.module('app', []).controller('vaList', function($scope) {

	$scope.actorData = [
		{
			"name": "安済 知佳",
			"kana_en": "anzai chika",
			"kana_jp": "あんざい ちか",
			"birthday": "非公開",
			"belong": "エイベックス・ピクチャーズ"
		}, {
			"name": "高橋 李依",
			"kana_en": "takahashi rie",
			"kana_jp": "たかはし りえ",
			"birthday": "1994.2.27",
			"belong": "81プロデュース"
		},
		～ 略 ～
		{
			"name": "早見 沙織",
			"kana_en": "hayami saori",
			"kana_jp": "はやみ さおり",
			"birthday": "1991.5.29",
			"belong": "アイムエンタープライズ"
		}
	];

	$scope.views = 10; // 表示する件数
	$scope.nextView = 10; // もっと見るをクリックしたときに表示する数

	// ページャークリック時
	$scope.moreClick = function () {
		$scope.moreCount++;
		$scope.views = $scope.views + $scope.nextView;
	};
});

もっと見るボタンのデモページ