Search code examples
javascriptangularjsangularjs-ng-class

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>