Angular JS : html table columns ordering not worki

Question

I've created an application in angular-JS for sorting values in tables. Certain columns in tables are dynamic and been created based on the child JSON array

For example the JSON structure returning from a service is in the structure where the others field of the main JSON contains another JSON array which is the additional columns,

In the below structure the
first object has File 4,
second object has File 1 and File 2,
third object has File 2 and File 3 and
fourth object has File 3 and File 4

so all together there will be four additional dynamic columns i.e File 1, File 2, File 3, File 4 each object has value for the corresponding File field, sometime present sometime not present.

<th ng-repeat="colms in getcolumns()"><a ng-click="sort_by("dont know wat to pass")">
              <i>{{colms}}</i>
            </a>
</th>

I've shown the tables with the dynamic columns perfectly also I've implemented the sorting for each columns using angular-js. But the problem is that the sorting is working for all table columns except the dynamic columns

Can anyone please tell me some solution for this

My JS-Fiddle is given below

Demo

Answer 1

In order to sort the incoming JSON file you need to address the JSON fields. you can, when pressing the File1 for example, sort by the 'other' field ng-click="sort_by('others')" but it has no meaning.

my advice is to implement a more sophisticated sorting method when sorting the dynamic columns, like these:

<div ng-repeat="item in items | orderBy:foo">

and foo implementation will be:

$scope.foo = function(a, b) {
  comparison code here;
}

the comparison function should be as documented in here - http://docs.angularjs.org/api/ng/filter/orderBy

Answer 2

I understand you cant change the service that brings you the datas but you can transform it after you have it inside your controller. I created a function for you that should change your list's other column into individual columns having id as key and value as value.

$scope.transformDatas = function() {
    $scope.newDatas = [];
    for(var i in $scope.datas) {
        var auxData = {};
        angular.forEach($scope.datas[i], function(value, key) {
            if(key != 'others')
                auxData[key] = value;
            else {
                for(var j in $scope.datas[i].others) {
                    var nth = 1;
                    while(auxData[$scope.datas[i].others[j].id + ',' + nth] != undefined)
                        nth++;
                    auxData[$scope.datas[i].others[j].id + ',' + nth] = $scope.datas[i].others[j].value;
                }
            }
        });
        $scope.newDatas.push(auxData);
    }
}

From here to your goal it's easy job, you already done it (sorting the normal fields).

Fiddle http://jsfiddle.net/KR6Xh/15/