リスト表示でよく使いそうな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ページに表示する件数を使って、ページャーを自動で生成するように実装しています。
【参考サイト】
- ngRepeatでカスタムフィルタリング後の配列（オブジェクト）の件数を表示する方法 – Qiita
- AngularJS： 配列からm～n件目の要素を取り出すには？（limitTo） – Build Insider
- AngularJSで配列の数値分の★の繰り返しを入れ子のng-repeatで表示 | iwb.jp
コメントが承認されるまで時間がかかります。