Ordinare tabelle in AngularJS

In questo articolo avevamo visto come impostare un filtro in AngularJS.

Oggi aggiungiamo un'altra funzione: l'ordinamento!

In pratica ordiniamo i dati cliccando sulla cella d'intestazione della tabella.

Io non ho usato dei link, come in molti esempi online, perchè non mi funzionano; ho optato direttamente per il click sulla cella.

Ma prima vediamo il controller:

var app = angular.module('listBooksApp', []);

app.controller('BooksCtrl', function ($scope, $http, $modal) {

    $http.get('../service/book/all_books.php').
            success(function (data, status, headers, config) {
                $scope.books = data;
            }).
            error(function (data, status, headers, config) {
                alert('Impossibile reperire la lista!');
            });

    $scope.orderByField = 'title';
    $scope.reverseSort = false;
});

In pratica, rispetto a prima, abbiamo aggiunto due righe:

• la prima imposta un ordinamento di default
• la seconda imposta un ordinamento "normale", e non al "contrario" (ascendente e non discendente in pratica)

La nostra tabella HTML diventa così (tralasciate le classi che dipendono solo dal CSS che uso, e non servono per AngularJS):

<div class="table-responsive">
    <div class="twelve columns">
        Cerca: <input ng-model="searchText">
        <br><br>
        <table class="table table-bordered table-condensed table-striped">
            <thead>
                <tr>
                    <th ng-click="orderByField = 'title';
                                reverseSort = !reverseSort">
                        Titolo
                        <span ng-show="orderByField == 'title'">
                            <span ng-show="!reverseSort">^</span>
                            <span ng-show="reverseSort">v</span>
                        </span>
                    </th>
                    <th ng-click="orderByField = 'author';
                                reverseSort = !reverseSort">
                        Autore
                        <span ng-show="orderByField == 'author'">
                            <span ng-show="!reverseSort">^</span>
                            <span ng-show="reverseSort">v</span>
                        </span>
                    </th>
                    <th ng-click="orderByField = 'editor';
                                reverseSort = !reverseSort">
                        Editore
                        <span ng-show="orderByField == 'editor'">
                            <span ng-show="!reverseSort">^</span>
                            <span ng-show="reverseSort">v</span>
                        </span>
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="book in books | filter:searchText | orderBy:orderByField:reverseSort">
                    <td>{{book.title}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.editor}}</td>
                    <td>
                        <button type="button" class="btn btn-sm btn-success btn-raised"
                                ng-click="open(book)">Dettaglio</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div> 

Gli ordinamenti dipendono dai campi dei valori che impostate nel dataset ovviamente; se mettete titotlo al posto di title, ad esempio, non funzionerà perchè non ho un campo titolo.

Direi che è tutto; come al solito è abbastanza semplice.

Enjoy!