Unable to sort the table with dynamic table header in angularjs?

Question

I am facing issue with table sorting with dynamic table header.I used a directive with static table header it is working fine.

Javascript code:

  .directive("sort", function() {
return {
    restrict: 'A',
    transclude: true,
    template : 
      '<a ng-click="onClick()">'+
        '<span ng-transclude></span>'+ 
        '<i class="glyphicon" ng-class="{\'glyphicon-sort-by-alphabet\' : order === by && !reverse,  \'glyphicon-sort-by-alphabet-alt\' : order===by && reverse}"></i>'+
      '</a>',
    scope: {
      order: '=',
      by: '=',
      reverse : '='
    },
    link: function(scope, element, attrs) {
      scope.onClick = function () {
        if( scope.order === scope.by ) {
           scope.reverse = !scope.reverse 
        } else {
          scope.by = scope.order ;
          scope.reverse = false; 
        }
      }
    }
}

I have commented the static header code and tried header with ng-repeat.It is not working for me.Please find the attached plunker link.

Plunker

Any help would be Appreciated.

Thanks!

Answer 1

There are 2 problems with your code:

1. In your html you have the following

    <th ng-repeat="header in header" sort order="'{{header.id}}'" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th> 

   where it should be (look at order)

    <th ng-repeat="header in header" sort order="header.id" by="order" reverse="reverse">{{header.tableHeaderTitle}}</th> 

2. Problem is with your scope, you can easily test it by replacing your

    if( scope.order === scope.by ) { scope.reverse = !scope.reverse } 

   with

    if( scope.order === scope.by ) { scope.$parent.$parent.reverse = !scope.reverse } 

I strongly suggest that you take a look at the following page from official angularjs documentation to learn more about directives and their scopes.

https://docs.angularjs.org/guide/directive