Angular OrderBy by object property in sub array

Question

I have a 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>

and I have a JSON file with the following data structure...

"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
         }]
     }

I would like to be able to sort the data in the table by the corresponding "Value" property when the "HeaderText" is clicked. So if the user clicked on "Policy Number" header on the table, the table will sort by the Column object with "Policy Number" in it's "HeaderText" property by the objects "Value" property. (hope that makes sense!?)

How can i go about doing this? I'm new to Angular, so please be gentle :)

EDIT:: Following the advice given in the first answer and it's not quite working.

My updated code as follows...

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

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

The sorting apears to change, but it's not sorting on the Value of column that i click on. Any ideas?

I'm pretty much working with the same kind of data.. Was there a solution found for this? — August
– August, Commented Dec 8, 2015 at 17:31

Eugenio Cuevas · Accepted Answer · 2015-07-27 14:29:10Z

1

You can use a orderBy filter

Change the predicate on updateSortOrder:

$scope.predicate = 'age';
$scope.reverse = true;
$scope.updateSortOrder = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
      };

And use the predicate on 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>

answered Jul 27, 2015 at 14:29

Eugenio Cuevas

11.1k3 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stuart Over a year ago

I've tried this, and although it seems like it's finding the right object in the Columns Array, it's not sorting by the Value property. see my updated question for my updated code

Stuart Over a year ago

this appears to always sort on the PolicyNumber field value

Collectives™ on Stack Overflow

Angular OrderBy by object property in sub array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related