[SOLVED] Not able to pull the css class with ng-class directive of AngularJS

Not able to pull the css class with ng-class directive of AngularJS

I want to create a table with sorting(ascending / descending) feature on click event (clikcking on table headers), using ng-clickof AngularJS. I have shared the code on Plunker.

The problem is that I am not able to pull the class name meant to display arrow icons.

Following is the HTML code.

<body ng-controller="myController">
<div>
    <br /><br />
    <table>
        <thead>
            <tr>
                <th ng-click="sortData('name')">Name <div ng-class="getSortClass(name)"></div></th>
                <th ng-click="sortData('dateOfBirth')">Date Of Birth <div ng-class="getSortClass(dateOfBirth)"></div></th>
                <th ng-click="sortData('gender')">Gender <div ng-class="getSortClass(gender)"></div></th>
                <th ng-click="sortData('salary')">Salary <div ng-class="getSortClass(salary)"></div></th>
                <th ng-click="sortData('salary')">Salary <div ng-class="getSortClass(salary)"></div></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees | orderBy : sortColumn : reverseSort">
                <td>{{employee.name | uppercase}}</td>
                <td>{{employee.dateOfBirth | date:"dd/MM/yyyy"}}</td>
                <td>{{employee.gender | lowercase}}</td>
                <td>{{employee.salary | number:3}}</td>
                <td>{{employee.salary | currency :"$"}}</td>
            </tr>
        </tbody>
    </table>
</div>

Following is the module & controller code

var app = angular.module("app", []);
app.controller("myController", function($scope) {
var employees = [
    {name: "Ali", dateOfBirth: new Date ("November 2, 1983"), gender: "Male", salary: 5555.555},
    { name: "Tauseef", dateOfBirth: new Date("December 21, 1993"), gender: "Female", salary: 6666.021 },
    { name: "Reza", dateOfBirth: new Date("June 31, 2002"), gender: "Female", salary: 12345.5689 },
    { name: "Gul", dateOfBirth: new Date("May 21, 1996"), gender: "Male", salary: 24587.2568 },
    { name: "Mohammad", dateOfBirth: new Date("April 21, 1997"), gender: "Male", salary: 5879.3654 },
    { name: "Ersahd", dateOfBirth: new Date("March 21, 1993"), gender: "Male", salary: 1011.3548 },
    { name: "Afroz", dateOfBirth: new Date("February 9, 1986"), gender: "Male", salary: 3533.126 },
    { name: "Waseem", dateOfBirth: new Date("January 21, 1986"), gender: "Male", salary: 6788.1287 }
];
$scope.employees = employees;
$scope.sortColumn = "name";
$scope.reverseSort = false;

$scope.sortData = function (column) {
    $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false ;
    $scope.sortColumn = column;
}
$scope.getSortClass = function(column) {
    if($scope.sortColumn == column)
    {
        return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
    }
   
}

});

Sorting is working fine but the class which is meant for displaying the arrow icon of sort is not being pulled.

Solution

try this. you must pass parameter in single quotation.

<th ng-click="sortData('gender')">Gender <div ng-class="getSortClass('gender')"></div></th>