セレクトボックスで並び替え

オブジェクトのリストを、要素の値によって並び替える方法です。
セレクトボックスで、どの要素で並び替えるのかをリアルタイムに変えられるようにしてみます。




Controller と Model を作る

並び替える条件として name と sex を準備します

var Controller = function($scope) {
    $scope.persons = [
        {name: 'tanaka', sex: 'man'},
        {name: 'sato', sex: 'woman'},
        {name: 'suzuki', sex: 'woman'},
        {name: 'okano', sex: 'man'},
        {name: 'kumagai', sex: 'man'}
    ];
}

View を作る

何もしないセレクトボックスを作成します
更にデータの一覧表示をします

<div ng-app ng-controller="Controller">
    <select>
        <option value="name">name</option>
        <option value="sex">sex</option>
    </select>
    <ul>
        <li ng-repeat="person in persons">
            {{person.name}} : {{person.sex}}
        </li>
    </ul>
</div>

<select> の値を取得する

ng-model を設定することで、選択した <option> の value を取得出来ます。
ここでは sort という名前のモデルに name または sex が入るようにします。

<div ng-app ng-controller="Controller">
    <select ng-model="sort">
        <option value="name">name</option>
        <option value="sex">sex</option>
    </select>
    <ul>
        <li ng-repeat="person in persons">
            {{person.name}} : {{person.sex}}
        </li>
    </ul>
</div>

<select> についてはこちらを参照

select - AngularJS
http://docs.angularjs.org/api/ng.directive:select

orderBy フィルタで並び替える

最後に <select> で取得した要素でリストを並び替えます。
orderBy フィルタに要素名を渡すと、その要素によって並び替えが行われます。

<div ng-app ng-controller="Controller">
    <select ng-model="sort">
        <option value="name">name</option>
        <option value="sex">sex</option>
    </select>
    <ul>
        <li ng-repeat="person in persons | orderBy:sort">
            {{person.name}} : {{person.sex}}
        </li>
    </ul>
</div>

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