orderBy

http://docs.angularjs.org/api/ng.filter:orderBy

概要
使用方法
デモ

概要

述語式によって並び順を指定します。

使用方法

filter:orderBy(array, expression[, reverse]);

引数

引数	説明
array	型：`Array` 並び替えを行う配列です。
expression	型：`function()`、`string`、`Array.<(function()\|string)>` 要素の順番を決定する際の比較に使用される述語式を指定します。下記から1つ選択することが可能です。 `function` Getter関数です。この関数の結果は、`<`、`=`、`>`演算子を使用して並び替えられます。 `string` オブジェクトを並び替えるために評価するAngular式で、'name'のように指定することで'name'と名付けられているプロパティを並び替えます。任意で`+`または`-`のプレフィックスを付けることで、昇順・降順を指定することが出来ます。 (例えば、+name、`-name`) `Array` 関数または文字列の配列の述語式です。配列内の最初の述語式が並び替えのために使用されますが、2つの項目が評価された際は、次の述語式が使用されます。
reverse(optional)	型：`boolean` 配列の順番を逆にします。
戻り値	説明
	型：`Array` 並び替えられた元となる配列のコピーです。

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
      <hr/>
      [ <a href="" ng-click="predicate=''">unsorted</a> ]
      <table class="friend">
        <tr>
          <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
              (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
          <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
          <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

function Ctrl($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:10},
       {name:'Mary', phone:'555-9876', age:19},
       {name:'Mike', phone:'555-4321', age:21},
       {name:'Adam', phone:'555-5678', age:35},
       {name:'Julie', phone:'555-8765', age:29}]
  $scope.predicate = '-age';
}

it('should be reverse ordered by aged', function() {
  expect(binding('predicate')).toBe('-age');
  expect(repeater('table.friend', 'friend in friends').column('friend.age')).
    toEqual(['35', '29', '21', '19', '10']);
  expect(repeater('table.friend', 'friend in friends').column('friend.name')).
    toEqual(['Adam', 'Julie', 'Mike', 'Mary', 'John']);
});

it('should reorder the table when user selects different predicate', function() {
  element('.doc-example-live a:contains("Name")').click();
  expect(repeater('table.friend', 'friend in friends').column('friend.name')).
    toEqual(['Adam', 'John', 'Julie', 'Mary', 'Mike']);
  expect(repeater('table.friend', 'friend in friends').column('friend.age')).
    toEqual(['35', '10', '29', '19', '21']);

  element('.doc-example-live a:contains("Phone")').click();
  expect(repeater('table.friend', 'friend in friends').column('friend.phone')).
    toEqual(['555-9876', '555-8765', '555-5678', '555-4321', '555-1212']);
  expect(repeater('table.friend', 'friend in friends').column('friend.name')).
    toEqual(['Mary', 'Julie', 'Adam', 'Mike', 'John']);
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:10},
       {name:'Mary', phone:'555-9876', age:19},
       {name:'Mike', phone:'555-4321', age:21},
       {name:'Adam', phone:'555-5678', age:35},
       {name:'Julie', phone:'555-8765', age:29}]
  $scope.predicate = '-age';
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
      <hr/>
      [ <a href="" ng-click="predicate=''">unsorted</a> ]
      <table class="friend">
        <tr>
          <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
              (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
          <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
          <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。