2017-06-04 64 views
1

嗨,我是AngularJS的新手。我正在創建一個示例應用程序,通過單擊表頭對錶中的數據進行排序。在第一次點擊時,應按升序排列。第二次點擊它應該安排它下降。 下面提供的是cshtml代碼。ng-click在表頭中不起作用

<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-點擊不工作。有沒有人以前面臨同樣的問題,如果是的話,你能幫助我嗎?

+1

你可以嘗試「employee in employees | orderBy:sortColumn」嗎?並且它以firstname默認排序。點擊不會改變任何東西 –

回答

1

有需要修復兩件事情:

sortColumn應該沒有單引號中使用,因爲它是一個變量 reverseSort變量添加到排序依據。

<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

+0

@ user1470066它有幫助嗎? –