0

ng-click我想使用AngularJS在点击事件(点击表头)上创建一个具有排序(升序/降序)功能的表格。我已经在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';
    }
   
}

});

排序工作正常,但未拉出用于显示排序箭头图标的类。

4

1 回答 1

1

尝试这个。您必须在单引号中传递参数。

<th ng-click="sortData('gender')">Gender <div ng-class="getSortClass('gender')"></div></th>
于 2016-03-11T06:39:20.297 回答