AngularJS: Sorting issue

Question

Making use of AngularJS orderBy filter I've created a sortable table here,

http://plnkr.co/edit/AarOSuawXVYe9C5LBDOK?p=preview

I am using the value of 'reverse' for each table header on click to determine the direction of the sort. This creates an obvious problem however as I click on different table headers they simply go to the opposite of the reverse value which may have previously been changed from another table header.

<th ng-click="predicate = 'character'; reverse=!reverse">alpha</th>
<th ng-click="predicate = 'num'; reverse=!reverse">num</th>
<th ng-click="predicate = 'dec'; reverse=!reverse">dec</th>
<th ng-click="predicate = 'value'; reverse=!reverse"></th>
<th ng-click="predicate = 'date'; reverse=!reverse">date</th>

and the ng-repeat populating my table rows using the orderBy filter

<tr ng-repeat="line in infoCtrl.data | orderBy:predicate:reverse">

How can I isolate the scope of reverse, or give them an individual reverse value each?

Prasad K - Google · Accepted Answer · 2014-06-07 02:50:35Z

2

Ideally, I would check the current value of predicate before reversing the sort boolean. If it's same, reverse it. Otherwise, reset it to the default.

Have a function in your controller for sorting:

 $scope.predicate = "character";
 $scope.reverse = false    
 $scope.sort = function(p) {
     if ($scope.predicate == p) {
         $scope.reverse = !$scope.reverse;
     } else {
         $scope.predicate = p;  
         $scope.reverse = false;
     }
 }

and call this function from html:

    <th ng-click="sort('character')">alpha</th>
    <th ng-click="sort('num')">num</th>
    <th ng-click="sort('dec')">dec</th>
    <th ng-click="sort('value')"></th>
    <th ng-click="sort('date')">date</th>

edited Jun 7, 2014 at 2:50

answered Jun 5, 2014 at 18:52

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

captainrad Over a year ago

So the problem with this is that, no other column but the "character" column will be sortable. Maybe I am misunderstanding something?

Collectives™ on Stack Overflow

AngularJS: Sorting issue

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related