Alex Man
Alex Man

Reputation: 4886

Sorting is not working in ngTable when using nested json

I have created an application in angularjs with ngTable, The application is working fine but sorting is not working. My json structured is nested, but values are coming correctly with the table

Can anyone please tell me some solution for this

My code is as given below

JSFiddle

html

<div ng-controller="IndexCtrl">
    <table border="1" ng-table="mytable">
         <tbody ng-repeat="peop in peoples">
        <tr ng-repeat="people in peop">
            <td sortable="'id'" data-title="'Id'">{{people.id}}</td>
            <td sortable="'desig'" data-title="'Desig'">{{people.desig}}</td>
            <td sortable="'name'" data-title="'Name'">{{people.name}}</td>
            <td sortable="'place'" data-title="'Place'">{{people.place}}</td>
        </tr>
        </tbody>
    </table>
</div>

script

var app = angular.module('app', ['ngTable']);

app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
  $scope.peoples = {
    "ime123": [{"id": 145, 
                "desig": "doctor",
                "name": "Manu",
                "place": "ABCD"
               }],
    "ime148": [{"id": 148,
                "desig": "engineer",
                "name": "John",
                "place": "POLK"
               },
               {
                "id": 150,
                "desig": "scientist",
                "name": "Mary",
                "place": "USE"
               }]
  };    
        $scope.mytable = new ngTableParams({
        sorting: {
            name: 'desc'
        }
    }, {
        getData: function($defer, params) {
        $scope.peoples = $filter('orderBy')( $scope.peoples, params.orderBy());
        $defer.resolve( $scope.peoples);
        }
    });
});

Upvotes: 3

Views: 1275

Answers (1)

Kostia Mololkin
Kostia Mololkin

Reputation: 728

The way you work with nested array in ngtable is not suitable ,in your case you can make array one dim again and allow directive to groupping

html

<table border="1" ng-table="mytable">
        <tbody ng-repeat="peop in $groups">
            <tr ng-repeat="people in peop.data">
                <td sortable="id" data-title="'Id'">{{people.id}}</td>
                <td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
                <td sortable="name" data-title="'Name'">{{people.name}}</td>
                <td sortable="place" data-title="'Place'">{{people.place}}</td>
            </tr>
        </tbody>
    </table>

contoller

$scope.mytable = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'desc'
        }
    }, {
        total: peoples.length,
        groupBy:'group',
        getData: function ($defer, params) {
            peoples = $filter('orderBy')(peoples, params.orderBy());
            $defer.resolve(peoples);
        }
    });

data

var peoples = [{
        "id": 145,
            "desig": "doctor",
            "name": "Manu",
            "place": "ABCD",
            "group": "ime123"  //for grouping
    }, {
        "id": 148,
            "desig": "engineer",
            "name": "John",
            "place": "POLK",
            "group": "ime148" //for grouping
    }, {
        "id": 150,
            "desig": "scientist",
            "name": "Mary",
            "place": "USE",
            "group": "ime148"  //for grouping
    }];

here almost working jsfiddle. default desc not working yet (ver 0.3.1)

Upvotes: 2

Related Questions