Не удается вытащить класс css с помощью директивы ng-class AngularJS

Я хочу создать таблицу с функцией сортировки (возрастания / убывания) по событию щелчка (щелчок по заголовкам таблицы), используя ng-clickAngularJS. Я поделился кодом на Plunker.

Проблема в том, что я не могу вытащить имя класса, предназначенное для отображения значков со стрелками.

Ниже приведен HTML-код.

<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>

Ниже приведен код модуля и контроллера

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';
    }

}

});

Сортировка работает нормально, но класс, который предназначен для отображения значка стрелки сортировки, не извлекается.

Источник

1 ответ

Решение

Попробуй это. Вы должны передать параметр в одинарных кавычках.

<th ng-click="sortData('gender')">Gender <div ng-class="getSortClass('gender')"></div></th>
Источник
Другие вопросы по тегам