AngularJS: table sorting

by Pankaj Sapkal

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>
<table ng:controller="SortableTableCtrl">
    <thead>
        <tr>
            <th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
            <td>{{row.a}}</td>
            <td>{{row.b}}</td>
            <td>{{row.c}}</td>
        </tr>
    </tbody>
</table>

CSS

td {
    padding: 0.2em 1em;
}
th {
    text-align: center;
}
thead {
    border-bottom: 2px solid black;
    cursor: pointer;
}
/* http://www.greywyvern.com/code/php/binary2base64 */
 .sort-true {
    background:no-repeat right center url(data:image/gif;
    base64,...

JavaScript

function SortableTableCtrl() {
    var scope = this;

    // data
    scope.head = {
        a: "Name",
        b: "Surname",
        c: "City"
    };
    scope.body = [{
        a: "Hans",
        b: "Mueller",
        c: "Leipzig"
    }, {
        a: "Dieter",
        b: "Zumpe",
        c: "Berlin"
    }, {
        a: "Bernd",
        b: "Danau",
        c: "Muenchen"
    }];

    scope.sort = {
        column: 'b',
        descending: false
    };

    scope.selectedCls = function (column) {
        return column == scope.sort.column && 'sort-' + scope.sort.descending;
    };

    scope.changeSorting = function (column) {
        var sort = scope.sort;
        if (sort.column == column) {
            sort.descending = !sort.descending;
        } else {
            sort.column = column;
            sort.descending = false;
        }
    };
}