AngularJS TIPS
独自の規則で配列をソートするには？（orderBy）
2015年8月10日
独自の並べ替え規則を使って、配列の内容の並べ替える方法を解説。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介する。
orderByフィルターにはfunction型を渡すことで、独自のソート規則を定義することもできます。
例えば以下は、生徒情報（配列students）を、course（コース）プロパティでソートする例です。courseプロパティは「超難関→ハイレベル→スタンダード」の順で並ぶようにします。
HTML
|
<!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.4/css/bootstrap.min.css" />
</head>
<body ng-controller="MyController">
<table class="table">
<tr>
<th>氏名</th><th>コース</th><th>学年</th>
</tr>
<tr ng-repeat="student in students | orderBy : mySort">
<td>{{student.name}}</td>
<td>{{student.course}}</td>
<td>{{student.grade}}年</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.students = [
{ name: '鈴木久美子', course: 'スタンダード', grade: 2 },
{ name: '井上一郎', course: 'ハイレベル', grade: 1 },
{ name: '山田洋子', course: 'スタンダード', grade: 2 },
{ name: '田中かおり', course: 'ハイレベル', grade: 3 },
{ name: '原田大樹', course: '超難関', grade: 2 }
];
$scope.mySort = function(student) {
var courses = { '超難関': 0, 'ハイレベル': 1, 'スタンダード': 2 };
return courses[student.course];
};
}]);
</script>
</body>
</html>
|
独自のソート規則で配列をソートするためのコード（order_custom.html）
▼
コース順に生徒をソート
ソート関数（ここではmySort）であるための条件は、以下の通りです。
- 引数には、配列の個々の要素（ここでは単一の生徒情報）を受け取ること
- 戻り値として、ソート時に利用すべき数値を返すこと
この例であれば、courseプロパティの値を、連想配列coursesの対応関係に従って数値に変換することで、「超難関→ハイレベル→スタンダード」という順序を表現しています。
もしもcourseプロパティを逆順にソートしたいならば、第2引数にtrueを指定します。
HTML
|
<tr ng-repeat="student in students | orderBy : mySort: true">
|
「スタンダード→ハイレベル→超難関」の順でソートするためのコード
▼
並び順が逆に
もちろん、mySort関数をソートキーの一部としても指定しても構いません。
HTML
|
<tr ng-repeat="student in students | orderBy : [ 'grade', mySort ]">
|
grade／courseプロパティをキーにソート
▼
コース／学年順に生徒を並べ替え
処理対象：配列の並べ替え カテゴリ：基本
処理対象：フィルターコンポーネント カテゴリ：基本
API：orderBy カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
処理対象：フィルターコンポーネント カテゴリ：基本
API：orderBy カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
※以下では、本稿の前後を合わせて5回分（第19回～第23回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
21. 【現在、表示中】≫ 独自の規則で配列をソートするには？（orderBy）
独自の並べ替え規則を使って、配列の内容の並べ替える方法を解説。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介する。
22. 配列の内容をフィルターするには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。
23. 自作の検索条件／比較ルールで配列を検索するには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。
