Changing glyphicons on click + table header colour change

Question

Essentially I am using chevrons glyphicon-chevron-down for sort buttons on a set table headers. When you click on a chevron it will sort the table in descending order and when you click it a second time it sort in an ascending order and so on and so forth. If you click on a different column's chevron, it will sort first by descending and then the above applies

I wish to make it so when you click on a chevron it alternates between glyphicon-chevron-down and glyphicon-chevron-up . Do note there needs to be some sort of logic to make it so clicking on another column won't change the chevron to a glyphicon-chevron-up on the first click as it will be first sorting in the descending order.

Additionally I'm trying to make it so the table header with the chevron that got clicked changes colour and will return to the previous colour when a different chevron is clicked.

Any assistance for either of the problems will be greatly appreciated. Here is a sample of the code for reference.

The HTML

<th>Header1<span ng-click="setOrderProperty('c.name')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>

<th>Header2<span ng-click="setOrderProperty('c.name2')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>

<th>Header3<span ng-click="setOrderProperty('c.name3')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>

The JavaScript

$scope.setOrderProperty = function(propertyName) {
        if ($scope.orderProperty === propertyName) {
            $scope.orderProperty = '-' + propertyName;
        } else if ($scope.orderProperty === '-' + propertyName) {
            $scope.orderProperty = propertyName;
        } else {
            $scope.orderProperty = propertyName;
        }
    };

Answer 1

What you need is ng-class .

Maintain a status property on your scope. Clicking on the header will set this property:

$scope.activeColumn = '';
$scope.ascending = '';
$scope.setOrderProperty = function (activeColumn) {
    // If clicking on the current column, reverse ascending/descending
    if ($scope.activeColumn === activeColumn) {
        $scope.ascending = !$scope.ascending;
    }
    $scope.activeColumn = activeColumn;
};

For your HTML:

<th>Header1<span ng-click="setOrderProperty(c.name)" ng-class="{ 
        'active': activeColumn === c.name, 
        'glyphicon-chevron-down': ascending === false, 
        'glyphicon-chevron-up': ascending === true
    }" class="glyphicon glyphiconsort pull-right"></span></th>

<th>Header2<span ng-click="setOrderProperty('c.name2')" ...

<th>Header3<span ng-click="setOrderProperty('c.name3')" ...

In your CSS, set the styles of class active for the selected column for sorting.