toggle custom sorting icon in AngularJS

Question

I have been trying to put a custom grid style and sorting icon in angular js and have succeded to do so far also except for the toggling of sorting icon

here is my html code of headers

<div ng-app="myApp">
    <div ng-controller="TableCtrl">

        <table class="MmTable">
            <thead class="TblRow HeaderRow">
                <tr>
                    <th class="TblHeader TblHeaderSortable SortIndex0 Column0" style="text-align: left;">
                        <i ng-click="sort('Subsidiary',$event)" class="SortDesc">
                            Subsidiary
                            <span class="{{Header[0]}}"></span>
                        </i>

                    </th></theah></table>

and here is sort function

$scope.sort = function (sortBy,event,element) {
    $scope.resetAll();

    $scope.columnToOrder = sortBy;
    $scope.sortingOrder = 'asc';
    //$(element).removeClass('SortDesc');
    //$(element).addClass('SortAsc');

    //$Filter - Standard Service
    $scope.filteredList = $filter('orderBy')($scope.filteredList, $scope.columnToOrder, $scope.reverse);

    if ($scope.reverse)
        iconName = 'glyphicon glyphicon-chevron-up';
    else
        iconName = 'glyphicon glyphicon-chevron-down';


    $(this).removeClass('SortDesc');
    if ($(this).hasClass("SortDesc")) {

        $(this).removeClass().addClass('SortAsc');


    } else {
        $(this).removeClass().addClass('SortDesc');
    }

    if (sortBy === 'Subsidiary') {
        $scope.Header[0] = iconName;
    }
    else if (sortBy === 'name') {
        $scope.Header[1] = iconName;
    } else {
        $scope.Header[2] = iconName;
    }

    $scope.reverse = !$scope.reverse;

    $scope.pagination();
};

as, in above code i was trying to manipulate dom then found that cant do that in Angular. so,tried witg ng-style also but didn't work. Just needed a bit help in toggling of sorting icon as i want to put custom class for asc and desc sorting

bholben · Accepted Answer · 2014-12-10 02:07:48Z

2

You could toggle some Font Awesome icons like this...

HTML:

<tr ng-controller="toggleController as tc">
  <th ng-click="tc.toggle('name')">Name
    <i ng-class="tc.nameDesc ? 'fa fa-toggle-down' : 'fa fa-toggle-up'"></i>
  </th>
  <th ng-click="tc.toggle('date')">Date
    <i ng-class="tc.dateDesc ? 'fa fa-toggle-down' : 'fa fa-toggle-up'"></i>
  </th>
</tr>

Javascript:

angular.module("toggleApp", []).controller('toggleController', function () {
  this.toggle = function (property) {
    this.nameDesc = (property === 'name') ? !this.nameDesc : this.nameDesc;
    this.dateDesc = (property === 'date') ? !this.dateDesc : this.dateDesc;
  }
});

Here's the fiddle.

answered Dec 10, 2014 at 2:07

bholben

1,0872 gold badges16 silver badges24 bronze badges

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

Comments

coder · Accepted Answer · 2014-08-28 05:54:06Z

1

One solution is to keep a boolean variable in your scope, lets say sortAscending="true", when you sort in descding order change the value to false.

In your html you can use something like this

ng-class="sortAscending ?'ascClass':'desClass'"

Working example: http://jsfiddle.net/uev10oru/

Adding new working example with toggle button http://jsfiddle.net/uev10oru/1/

edited Aug 28, 2014 at 5:54

answered Aug 28, 2014 at 5:20

coder

4,4562 gold badges21 silver badges23 bronze badges

5 Comments

user3631413 Over a year ago

still not the correct way giving lexixal error if i do like this ng-class="{'SortAsc' : sortAscending()}",then its fine but ternary operator causing problem

coder Over a year ago

you might have mixed single/double quotes, refer a working example jsfiddle.net/uev10oru, change true to false to see change

user3631413 Over a year ago

here is my snippet <i ng-click="sort('Subsidiary',$event)" ng-class="sortOrder ? 'SortAsc' : 'SortDesc'" >still giving that lexical error

coder Over a year ago

can you create a jsfiddle for this ?

user3631413 Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

toggle custom sorting icon in AngularJS

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related