AngularJS TIPS
配列をソートするには？（orderBy）
2015年8月3日
配列の内容を、指定されたキーで並べ替える方法を解説。逆順や、複数のキーを指定してソートする方法も紹介する。
配列を特定のキーで並べ替えるには、orderByフィルターを利用します。例えば以下は、配列itemsの内容をprice（価格）プロパティでソートする例です。
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><th>入荷日</th>
</tr>
<tr ng-repeat="item in items | orderBy: 'price'">
<td>{{item.brand}}</td>
<td>{{item.price}}円</td>
<td>{{item.farm}}</td>
<td>{{item.arrival | date}}</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.items = [
{
sale_no: '001234',
brand: 'ななつぼし',
price: 2150,
farm: '北海道',
arrival: new Date(2015, 7, 10)
},
{
sale_no: '002345',
brand: 'ひとめぼれ',
price: 2000,
farm: '宮城',
arrival: new Date(2015, 6, 20)
},
……中略（同じような配列項目を続ける）……
];
}]);
</script>
</body>
</html>
|
配列itemsの内容を価格昇順にソートするためのコード（order.html）
▼
価格の低い順に商品情報を表示
orderByフィルターの構文は、以下の通りです。
［構文］orderByフィルター
{{list | orderby: key [:reverse]}}
- list： 並べ替え対象となる配列
- key： ソート式（プロパティ）
- reverse： 配列を逆順に並べるか（デフォルトはfalse）
この例であれば引数keyにpriceを指定することで、価格昇順にソートしています。-priceのようにすることで、降順にソートすることもできます。
HTML
|
<tr ng-repeat="item in items | orderBy: '-price'">
|
価格について降順にソートするコード
▼
商品を価格の高い順にリスト表示
引数reverseと合わせて、以下のように書いても同じ意味です。これでpriceプロパティを昇順にソートした結果を逆順にする、という意味になります。
HTML
|
<tr ng-repeat="item in items | orderBy: 'price': true">
|
価格について降順にソートするコード（2）
また、引数keyに配列を渡すことで、複数のキーで並べ替えることもできます。例えば以下であれば、産地（farm）昇順、価格（price）降順でソートします。
HTML
|
<tr ng-repeat="item in items | orderBy: ['farm', '-price']">
|
産地昇順／価格降順でソートするコード
▼
複数のキーでソートした結果
処理対象：配列の並べ替え カテゴリ：基本
処理対象：フィルターコンポーネント カテゴリ：基本
API：orderBy カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
処理対象：フィルターコンポーネント カテゴリ：基本
API：orderBy カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
※以下では、本稿の前後を合わせて5回分（第18回～第22回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
18. 文字列を大文字／小文字に変換するには？（lowercase／uppercase）
lowercase／uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase／angular.uppercaseメソッドについても紹介する。
20. 【現在、表示中】≫ 配列をソートするには？（orderBy）
配列の内容を、指定されたキーで並べ替える方法を解説。逆順や、複数のキーを指定してソートする方法も紹介する。
22. 配列の内容をフィルターするには？（filter）
任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。
