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';
}
}
});
排序工作正常,但未拉出用于显示排序箭头图标的类。