Question

您好我是AngularJS的新手。我正在创建一个示例应用程序，通过单击表头来对表中的数据进行排序。在第一次单击时，它应按升序排列。第二次单击它应该安排它下降。下面提供的是cshtml代码。

<div ng-controller="myController">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th ng-click="sortData('firstname')">First Name</th>
<th>Last Name</th>
<th>Salary</th>
 </tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees|orderBy:'sortColumn'">
<td>{{employee.firstname | lowercase}}</td>
<td>{{employee.lastname| uppercase}}</td>
<td>{{employee.salary |currency:"$":1}}</td>
</tr>
</tbody>
</table>
</div>

以下提供的是模块脚本

var myApp = angula
 .module("myModule", [])
 .controller("myController", function ($scope) {
  var employee = [

 { firstname: "First", lastname: "Trueman", salary: "20001" },
 { firstname: "Second", lastname: "someone", salary: "20002" },
 { firstname: "Third", lastname: "apple", salary: "20003" },
 { firstname: "Fourth", lastname: "parrot", salary: "20004" },
 { firstname: "Fifth", lastname: "mat", salary: "20005" },
 ];
 $scope.employees = employee;
 $scope.sortColumn = "firstname";
 $scope.reverseSort = false;
 $scope.sortData = function (column) {
 $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
});

由于某些原因，ng-click无效。以前是否有人面临同样的问题。如果是，你可以帮我解决这个问题。

Answer 1

有两件事需要修复：

sortColumn应该在没有单引号的情况下使用，因为它是一个变量将reverseSort变量添加到orderBy。

<table class="table table-bordered table-striped table-hover">
<thead>
  <tr>
    <th ng-click="sortData('firstname')">First Name</th>
    <th>Last Name</th>
    <th>Salary</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="employee in employees|orderBy: sortColumn : reverseSort">
    <td>{{employee.firstname | lowercase}}</td>
    <td>{{employee.lastname| uppercase}}</td>
    <td>{{employee.salary |currency:"$":1}}</td>
  </tr>
</tbody>

我创建了一个有效的plnkr here。

ng-click在表标题

1 个答案: