AngularJS ng-repeat enable sorting on table columns

Question

I am creating a table from a Array of JSONObject. And want to enable sorting on column header click. My code is as below.

<table>
    <tr ng-repeat-start="record in records | orderBy:columnToOrder:reverse" ng-if="$first">
        <td>S.No</td><td ng-repeat="(key,value) in record " ng-click="columnToOrder=key;reverse=!reverse">{{key}}</td>
    </tr>
    <tr ng-repeat-end >
        <td>{{$index+1}}</td><td ng-repeat="(key,value) in record ">{{value}}</td>
    </tr>
</table>

My data lookg like

[
{ Count="85923", Property Name="Name 1"},
{ Count="85933", Property Name="Name 2"},
{ Count="85953", Property Name="Name 3"},
{ Count="85973", Property Name="Name 4"}
]

But this code is not working. No error is shown too. Please help me enabling this functionality.

Karthik Easwaran · Accepted Answer · 2015-01-14 14:18:59Z

1

Instead of using the inline, define a method for ordering and use that method during click, since if the variables are defined in inline, the variables are created in the child scope and it would not be available for the parent ng-repeat-start scope.

Controller

 $scope.order =function(key) {
    $scope.columnToOrder=key;
    $scope.reverse= !$scope.reverse
};

HTML

<table>
        <tr ng-repeat-start="record in records | orderBy:columnToOrder:reverse" ng-if="$first">
            <td>S.No</td><td ng-repeat="(key,value) in record " ng-click="order(key)">{{key}}</td>
        </tr>       
        <tr ng-repeat-end>
            <td>{{$index+1}}</td><td ng-repeat="(key,value) in record">{{value}}</td>
        </tr>
    </table>

answered Jan 14, 2015 at 14:18

Karthik Easwaran

5042 silver badges7 bronze badges

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

1 Comment

Amit Sharma Over a year ago

thanks a lot Karthik, It worked for me but as in my question my data has key as words(space in between) and so sorting is not working on that column.

Collectives™ on Stack Overflow

AngularJS ng-repeat enable sorting on table columns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related