CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Amit Sharma
Amit Sharma

Reputation: 1210

AngularJS ng-repeat enable sorting on table columns

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.

Upvotes: 1

Views: 728

Answers (1)

Karthik Easwaran
Karthik Easwaran

Reputation: 504

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>

Upvotes: 1

Related Questions