I am working with Angular to do this.
I have a table with some headers at the top. There are little down arrows inside the table headers. When clicked, these icons sort the table based on the column whose header was clicked. It's also a toggle, so if you click the column header again, it will switch between sorting the column in ascending or descending order.
I am trying to figure out how to make the arrows switch between two different images (one arrow image pointing up, the other pointing down) when a column header is clicked and the column is resorted (switching between ascending and descending). How would I do this?
The setup is fairly simple. Here's a column header:
<a href="#" ng-click="orderByColumn='duration'; reverseSort = !reverseSort">
Duration<img ng-src="{{arrowDirection}}" alt="Filter Workshops by Duration of Workshop"/>
</a>
And here's my table itself:
<div data-ng-repeat="workshop in workshops | orderBy:orderByColumn:reverseSort">
<div data-ng-bind="workshop.WorkshopCode"></div>
<div data-ng-bind="workshop.Title"></div>
<div data-ng-bind="workshop.StartDate"></div>
<div data-ng-bind="workshop.duration"></div>
<div data-ng-bind="workshop.Modality"></div>
</div>
Also, here's a codepen demonstrating the whole thing: http://codepen.io/trueScript/pen/XJLEVQ
So, I need a way to switch between two images in the ng-src value of the column headers when that column is clicked, so that the up arrow switches to a down arrow, and vice versa. However, obviously on that one column should switch directions.
How would I do this?
1) Add a ng-if to only display the arrow, if it's sorted by the column:
<a href="#" ng-click="orderByColumn='duration'; reverseSort = !reverseSort">
Duration<img ng-if="orderByColumn==='duration'" ng-src="{{arrowSrc}}" alt="Filter Workshops by Duration of Workshop"/>
</a>
2) Setting arrow image source in the controller:
$scope.$watch('reverseSort', function (value) {
if (value) {
$scope.arrowSrc = 'http://upload.wikimedia.org/wikipedia/commons/3/30/Gtk-go-down.svg';
} else {
$scope.arrowSrc = 'http://upload.wikimedia.org/wikipedia/commons/8/88/Gtk-go-up.svg';
}
});