ng-table sorting not working

Question

I have created an application using ng-table, the application is working fine which had generated table using ng-table. The problem which i am facing is that the table sorting is not working. My code is as given below

Working Demo

html

<table ng-table="tableParams" class="table">
        <tr ng-repeat="user in myValues">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
</table>

script

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    $scope.myValues = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}, 
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        sorting: {
            name: 'asc'     
        }
    }, {
        getData: function($defer, params) {
            $defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));
        }
    });
});

score 20 · Accepted Answer · answered Oct 07 '14 at 14:15

20

$defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));

will create a new sorted array but will not change $scope.myValues.

So either, you set $scope.myValues to the sorted array each time:

$scope.myValues = $filter('orderBy')($scope.myValues, params.orderBy());
$defer.resolve($scope.myValues);

Or use $data in ng-repeatinstead of myValues:

<tr ng-repeat="user in $data">

answered Oct 07 '14 at 14:15

manji

47,442
5
96
103

I think that the use of $data to fetch items is not obviously a solution to update the array data. I use this, and I still have to do a manual filter into my getData function in order to see my sort applied. thx for the tip – Alex Nov 23 '15 at 13:05

score 5 · Answer 2 · answered Oct 07 '14 at 14:14

5

In your HTML you need to update the myValues to be $data.

<tr ng-repeat="user in $data">

Plunker

answered Oct 07 '14 at 14:14

BatteryAcid

8,381
5
28
40

so if there are two tables then how will i tell which data to be taken – Alex Man Oct 07 '14 at 14:15

score 3 · Answer 3 · answered Oct 07 '14 at 14:15

You're writing to $scope.myValues, and using that in the ng-repeat directive - but you're sorting the data only in getData() on the table params object.

getData() doesn't ever change $scope.myValues, it only uses it to return a sorted array. What you really want to do is:

Don't make the full dataset available on the scope, but store it in a variable inside the controller:

var data = [{name: "Moroni", age: 50}, ...]

$defer.resolve($filter('orderBy')(data, params.orderBy()));

Use $data inside the HTML code, because this is what accesses getData():

<tr ng-repeat="user in $data">

ng-table sorting not working

3 Answers3

Linked