Angular.jsでリストの絞り込みと並び替えとページャーを実装する

2016.03.26

リスト表示でよく使いそうなfilter、orderByとページャーの機能を実装してみます。

サンプルコード

ng-repeatでリストを表示して、filterやorderByで絞り込みや並び替えをしてみます。

HTML

<div ng-controller="vaList">
	<div class="action-list">
		<input id="name" name="name" type="text" ng-model="search" placeholder="検索" />
		<button ng-click="en_up()">英字読み昇順</button>
		<button ng-click="en_down()">英字読み降順</button>
		<button ng-click="jp_up()">ひらがな読み昇順</button>
		<button ng-click="jp_down()">ひらがな読み降順</button>
		<button ng-click="birth_up()">生年月日昇順</button>
		<button ng-click="birth_down()">生年月日降順</button>
	</div>

	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in actorData | filter:search | orderBy: orderVal">
			<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}} <span class="va-list-item_age">{{ageCalculation(actor.birthday)}}</span></div>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('vaList', ['$scope', 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.ageCalculation = function(birthday) {
		if(birthday == '非公開') {
			return;
		}
		var today = new Date();
		var current = parseInt('' + today.getFullYear() + number_of_digits((today.getMonth() + 1), 2) + number_of_digits((today.getDate()), 2));
		var birthArr = birthday.split('.');
		var birth = parseInt('' + birthArr[0] + number_of_digits(birthArr[1], 2) + number_of_digits(birthArr[2], 2));
		var age = parseInt((current - birth) / 10000);
		return '(' + age + '歳)';
	};

	// 並び順の指定
	$scope.orderVal = '';
	// 英字読み昇順
	$scope.en_up = function () {
		$scope.orderVal = 'kana_en';
	};
	// 英字読み降順
	$scope.en_down = function () {
		$scope.orderVal = '-kana_en';
	};
	// ひらがな読み昇順
	$scope.jp_up = function () {
		$scope.orderVal = 'kana_jp';
	};
	// ひらがな読み降順
	$scope.jp_down = function () {
		$scope.orderVal = '-kana_jp';
	};
	// 生年月日昇順
	$scope.birth_up = function () {
		$scope.orderVal = 'birthday';
	};
	// 生年月日降順
	$scope.birth_down = function () {
		$scope.orderVal = '-birthday';
	};
}]);

// 桁数の調整
function number_of_digits(num, digits) {
	var no = String(num);
	while(no.length < digits) {
		no = '0' + no;
	}
	return no;
}

リストの絞り込み・並び替えのデモページ
　

サンプルコード2

先ほどのリストにページャーの機能を追加してみます。

HTML

<div ng-controller="vaList">
	<div class="action-list">
		<input id="name" name="name" type="text" ng-model="search" placeholder="検索" ng-keyup="limitBegin = 0" />
		<button ng-click="en_up()">英字読み昇順</button>
		<button ng-click="en_down()">英字読み降順</button>
		<button ng-click="jp_up()">ひらがな読み昇順</button>
		<button ng-click="jp_down()">ひらがな読み降順</button>
		<button ng-click="birth_up()">生年月日昇順</button>
		<button ng-click="birth_down()">生年月日降順</button>
	</div>

	<div class="filter-result">{{filter.length}}件({{limitBegin / 10 + 1}} / {{pagerArr(filter.length / pageLimit).length}})</div>

	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in filter = (actorData | filter:search | orderBy: orderVal) | limitTo: pageLimit: limitBegin">
			<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}} <span class="va-list-item_age">{{ageCalculation(actor.birthday)}}</span></div>
		</li>
	</ul>

	<ul class="pager">
		<a href="" class="pager-item" ng-repeat="pager in pagerArr(filter.length / pageLimit)" ng-click="pagerClick($index)">{{pager + 1}}</a>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('vaList', ['$scope', 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.ageCalculation = function(birthday) {
		if(birthday == '非公開') {
			return;
		}
		var today = new Date();
		var current = parseInt('' + today.getFullYear() + number_of_digits((today.getMonth() + 1), 2) + number_of_digits((today.getDate()), 2));
		var birthArr = birthday.split('.');
		var birth = parseInt('' + birthArr[0] + number_of_digits(birthArr[1], 2) + number_of_digits(birthArr[2], 2));
		var age = parseInt((current - birth) / 10000);
		return '(' + age + '歳)';
	};

	// 並び順の指定
	$scope.orderVal = '';
	// 英字読み昇順
	$scope.en_up = function () {
		$scope.orderVal = 'kana_en';
	};
	// 英字読み降順
	$scope.en_down = function () {
		$scope.orderVal = '-kana_en';
	};
	// ひらがな読み昇順
	$scope.jp_up = function () {
		$scope.orderVal = 'kana_jp';
	};
	// ひらがな読み降順
	$scope.jp_down = function () {
		$scope.orderVal = '-kana_jp';
	};
	// 生年月日昇順
	$scope.birth_up = function () {
		$scope.orderVal = 'birthday';
	};
	// 生年月日降順
	$scope.birth_down = function () {
		$scope.orderVal = '-birthday';
	};

	$scope.pageLimit = 10; // リストの表示件数
	$scope.limitBegin = 0; // リストの表示開始位置

	// ページャークリック時
	$scope.pagerClick = function (num) {
		$scope.limitBegin = num * $scope.pageLimit;
	};

	// ページャー用の配列を返す
	$scope.pagerArr = function(num) {
		num = Math.ceil(num); // numの切り上げ
		var array = [];
		for (var i = 0; i < num; i++) {
			array[i] = i; // ページャー数分の配列を作成
		}
		return array;
	};
}]);

// 桁数の調整
function number_of_digits(num, digits) {
	var no = String(num);
	while(no.length < digits) {
		no = '0' + no;
	}
	return no;
}

リストの絞り込み・並び替え・ページャーのデモページ
「item in filter = (items | filter:query)」にするとfilterに絞り込み後の値が入るので、filter.lengthにすれば絞り込み後の件数を取得できます。
この絞り込み後の件数と1ページに表示する件数を使って、ページャーを自動で生成するように実装しています。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年10月
日 月 火 水 木 金 土
 1234
567891011
12131415161718
19202122232425
262728293031