我有一张桌子......
<table width="100%">
<thead>
<tr ng-repeat="row in data.Rows | limitTo:1">
<th ng-repeat="col in row.Columns" ng-show="{{col.Visible}}" ng-click="updateSortOrder(col.HeaderText)">
<a href>{{ col.HeaderText }}</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.Rows | orderBy: ??? ">
<td ng-repeat="col in row.Columns" ng-show="{{col.Visible}}">
{{ col.Value }}
</td>
</tr>
</tbody>
</table>
我有一个带有以下数据结构的JSON文件......
"Rows": [{
"Columns": [{
"HeaderText": "Policy Number",
"Value": "A123456789",
"Visible": true
}, {
"HeaderText": "VRM",
"Value": "XX12XXX",
"Visible": true
}, {
"HeaderText": "Event Date",
"Value": "2014-12-08 08:39:38.000",
"Visible": true
}, {
"HeaderText": "Road SL",
"Value": 30,
"Visible": true
}, {
"HeaderText": "Speed",
"Value": 39,
"Visible": true
}]
}
我希望能够在单击“HeaderText”时通过相应的“Value”属性对表中的数据进行排序。因此,如果用户单击表上的“策略编号”标题,该表将按对象“值”属性在其“HeaderText”属性中使用“策略编号”的列对象进行排序。 (希望有道理!?)
我怎么能这样做?我是Angular的新手,所以请保持温柔:)
EDIT :: 按照第一个答案中给出的建议,它并没有完全奏效。
我的更新代码如下......
<div ng-controller="ReportsController">
<h1>{{ data.ReportTitle }}<small ng-show="predicate !== null">Ordered by: {{data.Rows[0].Columns[predicate].HeaderText }} {{reverse ? "desc" : "asc"}}</small></h1>
<div>{{ error }}</div>
<table width="100%">
<thead>
<tr ng-repeat="row in data.Rows | limitTo:1">
<th ng-repeat="col in row.Columns" ng-show="{{col.Visible}}" ng-click="updateSortOrder($index)">
<a href>{{ col.HeaderText }}</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.Rows | orderBy:[predicate]:reverse ">
<td ng-repeat="col in row.Columns" ng-show="{{col.Visible}}">
{{ col.Value }}
</td>
</tr>
</tbody>
</table>
和我的控制员......
var ReportsController = function ($scope, $http, $routeParams) {
$scope.data = {};
var onDataRetreived = function (response) {
$scope.data = response.data;
}
var onError = function (reason) {
controller.error = "Could not fetch data.";
}
$http({
method: 'GET',
url: 'data/report.json'
})
.then(onDataRetreived, onError);
$scope.predicate = 0;
$scope.reverse = true;
$scope.updateSortOrder = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
};
angular.module('Portal').controller('ReportsController', ['$scope', '$http', '$routeParams', ReportsController]);
排序apears要更改,但它没有对我点击的列的值进行排序。有什么想法吗?
答案 0 :(得分:1)
您可以使用orderBy filter
更改updateSortOrder上的谓词:
$scope.predicate = 'age';
$scope.reverse = true;
$scope.updateSortOrder = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
并在ng-repeat上使用谓词:
<tr ng-repeat="row in data.Rows | orderBy:predicate:reverse ">
<td ng-repeat="col in row.Columns" ng-show="{{col.Visible}}">
{{ col.Value }}
</td>
</tr>