arrays - Angular OrderBy 通过子数组中的对象属性

Question

我有一张 table ...

<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”属性对表格中的数据进行排序。因此，如果用户单击表上的“Policy Number”标题，则该表将按对象“Value”属性的“HeaderText”属性中的“Policy Number”列对象排序。 (希望这是有道理的!？)

我该怎么做呢？我是 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>

还有我的 Controller ...

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>