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

Question

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.

Any specific reason that you are not using something like smart-table or ng-table? — cYrixmorten
– cYrixmorten, Commented Mar 11, 2016 at 7:36
@cYrixmorten: Actually I am in the learning phase of AngularJs and just trying to use the ng-directives, so I want to use the ng-class directive to learn it. — Ali Tauseef Reza
– Ali Tauseef Reza, Commented Mar 12, 2016 at 2:10

Hadi · Accepted Answer · 2016-03-11 07:00:03Z

1

try this. you must pass parameter in single quotation.

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

edited Mar 11, 2016 at 7:00

answered Mar 11, 2016 at 6:39

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

1 Comment

Ali Tauseef Reza Over a year ago

Yes the solution you gave is working but I am looking for bug in my code.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related