Angularjs int filter not sorting properly within smart-table

Question

I am using smart-table to present my data (which is loaded via json files via %http.get) on a view within my app.

within the controller for the view I have created a filter as the returned data from the json has numbers in it which are returned as data type string. The filter attempts to return the numbers as an INT data type so that the sort function of smart-table will order them correctly.

However no matter what I try the smart-table sort is still sorting the values as String data type.

My view which is called Interfaces.html:

<div ng-controller="interfaceController">
    <div class="container">
        <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped" ng-show="displayedCollection">
            <thead>
                <tr>
                    <th st-sort="Name">Interface</th>
                    <th st-sort="Disabled">Disabled</th>
                    <th st-sort="Online">Online</th>
                    <th st-sort="Failed">Failed</th>
                    <th st-sort="Error">Error</th>
                    <th st-sort="Overdue">Overdue</th>
                </tr>
                <tr>
                    <th colspan="4"><input st-search="" class="form-control" placeholder="global search...." type="text"/></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in displayedCollection">
                    <td>{{row.Name}}</td>
                    <td>{{row.Disabled | convertInt | number}}</td>
                    <td>{{row.Online}}</td>
                    <td>{{row.Failed}}</td>
                    <td>{{row.Error}}</td>
                    <td>{{row.Overdue}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

My controller which is called interfaceController.js

app.controller('interfaceController',['$scope','$http', function($scope,$http){

    $http.get('app/data/InterfacesAuto.json').success(function(data,status,headers,config){
        $scope.rowCollection = data;

        $scope.displayedCollection = [].concat($scope.rowCollection);
    });

}]);

// Filter takes a value from the table and returns it as an INT
app.filter('convertInt',function(){
    return function (input) {
        this.parseInt = parseInt;
        return (parseInt(input,10));
    };
});

The json which I am loading

[
{"Name":"First","Disabled":"2","Online":"5","Failed":"1","Error":"0","Overdue":"2"},
{"Name":"Second","Disabled":"163","Online":"426","Failed":"7","Error":"0","Overdue":"195"},
{"Name":"Third","Disabled":"0","Online":"1","Failed":"0","Error":"0","Overdue":"0"}
]

Im very new to angularjs and web design so thank you in advance for your help.

Cheers

Answer 1

You need to change the data type in the controller. The filter is used to format the data for display to the user.

Maybe you can transform the string to int right after the data from the server is received (I used jquery):

$( data).each(function( index, element ) {
          element.Disabled = parseInt(element.Disabled);
        });

Fiddle: http://jsfiddle.net/HB7LU/23575/

I used a filter to order by the 'Disabled' attribute.

Also is a good idea to have this logic (the ajax call and the processing of the data) in a angular Service.

Hope it helps.