Angular中的排序数字字段

Question

I have a table of data being populated by Angular but the 'rate' field is sorting as if it were a string and not a number. I know it needs converting but am not sure how to do it, especially as the list is being populated via AJAX.

Angular

app.controller('itemsCrtl', function ($scope, $http, $timeout) {

function returnItems(f){

    $http.get('angular-ajax/vcodes.php?filter=' + f).success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 50; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
    });

}

$scope.changeFilter = returnItems; // provide function for button click
returnItems('all'); // initialize default filter (all contacts) 

$scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;   
};

});

Table with column sort headers

    <table>
    <thead>
      <th>Code&nbsp;<a ng-click="sort_by('code');"><i class="glyphicon glyphicon-sort"></i></a></th>
      <th>Description&nbsp;<a ng-click="sort_by('description');"><i class="glyphicon glyphicon-sort"></i></a></th>
      <th>Rate % &nbsp;<a ng-click="sort_by('rate');"><i class="glyphicon glyphicon-sort"></i></a></th>
    </thead>
    <tbody>
        <tr ng-repeat="data in filtered = (list | orderBy : predicate :reverse)">
            <td>{{data.code | decodeURI}}</td>
            <td>{{data.description | decodeURI}}</td>
            <td>{{data.rate | number:2}}</td>
        </tr>
    </tbody>
</table>

Answer 1

The orderBy documentation says:

Note: if you notice numbers are not being sorted as expected, make sure they are actually being saved as numbers and not strings.

So, not having access to your dataset I assume that's the problem. If you can't control the data in the API, then you could process it in your http get return function:

$http.get('angular-ajax/vcodes.php?filter=' + f).success(function(data){
    $scope.list = data;
    $scope.list.forEach(function(item, index){
        $scope.list[index].rate = Number(item.rate);
    });
    . . .
});

Depending how much confidence you have in the rate field only being numbers or number-strings you could introduce error handling in the loop