How to reverse sort a column on click using AngularJS
I have a simple way to sort a column of a table, but I cannot find a way to alternate between the reverse sort on click and back. Does anyone have a solution to this problem? Below is a fiddle showing what I mean.
<div ng-app="app">
<div ng-controller="controller">
<p>{{orderProperty}}</p>
<div class="col-md-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Status<a ng-click="orderProperty = 'a'">^</a></th>
<th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
<th>Service<a ng-click="orderProperty = 'c'">^</a></th>
<th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
<th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
<th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in projects | orderBy:orderProperty">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
+3
source to share
3 answers
You can toggle the orderProperty by specifying the column name with "-". Replace the table header with this code:
<thead>
<tr>
<th>Status<a ng-click="setOrderProperty('a')">^</a></th>
<th>Ref<a ng-click="setOrderProperty('b')">^</a></th>
<th>Service<a ng-click="setOrderProperty('c')">^</a></th>
<th>Domain<a ng-click="setOrderProperty('d')">^</a></th>
<th>Service Owner<a ng-click="setOrderProperty('e')">^</a></th>
<th>Stage<a ng-click="setOrderProperty('f')">^</a></th>
</tr>
</thead>
... and add this function to your scope:
$scope.setOrderProperty = function(propertyName) {
if ($scope.orderProperty === propertyName) {
$scope.orderProperty = '-' + propertyName;
} else if ($scope.orderProperty === '-' + propertyName) {
$scope.orderProperty = propertyName;
} else {
$scope.orderProperty = propertyName;
}
}
+2
source to share
In html
change ng-click
to function call
<tr>
<th><a ng-click="sortProperty('a')">Status</a></th>
<th><a ng-click="sortProperty('b')">Ref</a></th>
<th><a ng-click="sortProperty('c')">Service</a></th>
<th><a ng-click="sortProperty('d')">Domain</a></th>
<th><a ng-click="sortProperty('e')">Service Owner</a></th>
<th><a ng-click="sortProperty('f')">Stage</a></th>
</tr>
In Javascript:
add '+' to orderProperty variable
$scope.orderProperty = "+f";
then add this function
$scope.sortProperty = function(column) {
var currentColumn = $scope.orderProperty.slice(1);
var currentDirection = $scope.orderProperty.slice(0, 1);
var dir = '+';
if (column === currentColumn) {
dir = currentDirection === '+' ? '-' : '+';
}
$scope.orderProperty = dir + column;
};
Clicking on a column header will now toggle sorting
+1
source to share