0

This is one column in my table. It shows the end date. I need to sort them on clicking the column title.

<th class="Theader">
<a href="" ng-click="predicate = 'endDate'; reverse=reversesort;reversesort=!reversesort" class="blackfont" style="color: #656565;" title="Click to sort">
  End Time
</a>
<span class="ordermenu fa fa-sort-asc" ng-show="!reversesort"></span><span class="ordermenu fa fa-sort-desc" ng-show="reversesort"></span>
</th>
Filburt
  • 17,626
  • 12
  • 64
  • 115
Rems
  • 9
  • 5

1 Answers1

3
    <div ng:controller="Main"><table>
<tr>
<th><a href ng:click="sortBy('age')">Age</a></th>
<th><a href ng:click="sortBy('date')">Date</a></th>
</tr>
<tr ng:repeat="friend in friends.$orderBy(sort, reverse)">
<td>{{friend.age}}</td>
<td>{{friend.date}}</td>

</tr> </table> </div>

function Main() {
this.friends = [{
    age: 10,
    date: '11 June 2011'},
{
    age: 19,
    date: '12 June 2011'},
{
    age: 21,
    date: '13 July 2011'},
{
    age: 35,
    date: '14 May 2011'},
{
     age: 29,
     date: '15 June 2011'}];

}

Main.prototype = {

sort: function(item) {
    if (this.predicate == 'date') {
        return new Date(item.date);
    }
    return item[this.predicate];
},

sortBy: function(field) {
    if (this.predicate != field) {
        this.predicate = field;
        this.reverse = false;
    } else {
        this.reverse = !this.reverse;
    }
},

reverse: false

};

Please refer this fiddle FIDDLE

Source: Sortable table columns with AngularJs

You may also refer this fiddle too.

Community
  • 1
  • 1
SE_User
  • 370
  • 4
  • 14
  • Never realised you could replace the hyphen used with the `ng-...` with a colon `ng:...`. Interesting. – TheLimeTrees Oct 29 '15 at 09:32
  • 1
    @TheLimeTrees [link] (https://github.com/angular/code.angularjs.org/blob/master/0.9.14/docs-0.9.14/angular.directive.ng:autobind.html) – SE_User Oct 29 '15 at 10:36