表を並び変える

htmlの表を並び替える場合、jQueryのプラグインを使うことが多いかもしれません。

jQuery plugin: Tablesorter 2.0

AngularJSには、orderByというものがあるので、それで頑張ってみます。
頑張ると言っても、一つの項目だったらドキュメント通りで大丈夫です。

AngularJS Documentation for orderBy

そんな感じで、適当に書いていきます。

普通に並び替える

表の上部をクリックすると、並び変わるようにしています。

ソース1

まずは、ng-repeatでデータをhtml上に並べる必要があります。
$scope.membersにそれらのデータを入れて、ループさせます。

ng-repeat="member in members | orderBy:sortData:reverseData

ここでは、sortDataとreverseDataという$scopeの変数にして入れました。

sortDataにmemberのどのkeyでソートするか（id/name/kana/mail/gender/age）、決めます。
reverseDataで昇順降順（false/true）を決めます。

上部のアンカーをクリックするとtableSort()が実行されると、sortDataに文字で値が入り、並びが変更されます。
（$eventは、jQueryなどのeventのAngularJS版です）

特殊な値は関数を使う

ソース2

表にcharacterというkeyとそれぞれの値（弱い/普通/強い）を追加しました。
このままだと、漢字のコード順に並び変わるので、弱い⇔強いとはなりません。

sortDataを関数して、値を数値にして返すと、意図した順番にできます。

var character = {"強い":2,"普通":1,"弱い":0};
$scope.sortData = function(member){
　　　　return character[member.type];
};

複数keyの並び替え

複数のkeyでソートしたい場合があると思います。

ソース3

sortDataを配列にすると、複数のkeyでの並び替えが可能になります。
配列の中身は、文字と関数が使えます。

文字では、+か-をつけることで、keyごとに昇順降順を変えることができます。

先に配列に入るkeyが優先されるので、選んだ順番を表示させたり、リセットボタンをつけたり、試行錯誤すると、こんな感じなりました。

sortDataに選んだkeyがあるか確認しているので、冗長になりました。

また、配列で関数を使うと、簡単に昇順降順を変えることができなくて、別々に関数を作ることにしました。

もっと良い方法があるかもしれませんが、まあ、良いでしょう。

まとめ

比較的簡単にソートできました。
（データが少ないので、分かりにくいかもしれませんが…）
ただ、表示する量が増えると重たくなるので、サーバー取得する場合と、検討したほうが良いかもしれません。