user3677404 user3677404 - 1 month ago 10
AngularJS Question

html table sorting doesn't work with angularJS

I am trying to sort my table with angularJS in function of the column name, but my table is not reacting.
Here is my html table:

<table class="table">
<tr >
<th ng-repeat="(i,facet) in voies.parameters.facet"><button type="button" class="btn btn-success" ng-click="toggleSort(i)">{{voies.parameters.facet[i]}}</button></th>
</tr>
<tr ng-repeat="(i,fields) in voies.records" | orderBy:sortColumn:reverse>
<td>{{voies.records[i].fields.joueur}}</td>
<td>{{voies.records[i].fields.name}}</td>
<td>{{voies.records[i].fields.point}}</td>
<td>{{voies.records[i].fields.club}}</td>
<td>{{voies.records[i].fields.country}}</td>
<td>{{voies.records[i].fields.vote}}</td>
<td>{{voies.records[i].fields.poste}}</td>
<td>{{voies.records[i].fields.continent}}</td>
</tr>




Here is my JS:

$scope.toggleSort = function(index) {
console.info(index);
if($scope.sortColumn === $scope.voies.parameters.facet[index]){
$scope.reverse = !$scope.reverse;
}
$scope.sortColumn = $scope.voies.parameters.facet[index];
};


My data is loaded from this link: dataBase

Any help would be more than welcome!

Answer

Your code works perfectly well when I fix this typo:

<tr ng-repeat="(i,fields) in voies.records" | orderBy:sortColumn:reverse>

Should be

<tr ng-repeat="(i,fields) in voies.records | orderBy:sortColumn:reverse">

Also, note that the ng-repeat iterator gives you the actual object ("facet", "fields"), so you don't need to use the indexer. Instead of this:

<td>{{voies.records[i].fields.joueur}}</td>

You should use simply:

<td>{{fields.joueur}}</td>