子数组中对象属性的 Angular OrderBy

Question

我有一张桌子...

<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 的新手，所以请温柔:)

编辑:: 按照第一个答案中给出的建议，它不太有效。

我的更新代码如下...

<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]);

排序似乎发生了变化，但它没有对我单击的列的值进行排序。有什么想法吗？

Answer 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>