I am implementing a sorting for list in ionic 1 framework.
I want the sorting column show the arrow up or down if it is selected only as below.
Example:
when sort age from ascending
when sort name from descending
However, as my code shown in ionic, it will show both arrow up and down, regardless what I want to sort
html
<div class="col col-33" ng-click="reverse = (orderWith=='Name')? !reverse: reverse;orderWith='Name'">Name<i class="material-icons"></i>?<i class="material-icons"></i></div>
<div class="col" ng-click="reverse = (orderWith=='Trade')? !reverse: reverse;orderWith='Trade'">Call<i class="material-icons"></i>?<i class="material-icons"></i></div>
<div class="col" ng-click="reverse = (orderWith=='num')? !reverse: reverse;orderWith='num'">Number<i class="material-icons"></i>?<i class="material-icons"></i></div>
How to make the header sorting like the picture above which show only arrow up when ascending and arrow down for descending for the column selected only?