Ordenando tablas con ng-repeat
Pues nada, me surgio la necesidad de aplicar ordenamiento a una table que usa ng-repeat para generar sus filas, y resulta que usando orderBy junto con ng-repeat es bastante sencillo, obrderBy acepta el nombre de la columna con lo que se ordernara la tabla, pero tambien acepta una funcion que regresa el nombre, partiendo de eso una implementation dinamica no es muy complicada.
<body ng-app="sortTableApp">
<script>
var app = angular.module('sortTableApp', []);
app.controller('sortableTableCtrl', ['$scope', function ($scope) {
this.reverse = false;
this.sortColumn = 'name';
this.dtSource = [{ name: 'Pablo', age: 20, valid: true },
{ name: 'Raul', age: 30, valid: false },
{ name: 'Juan', age: 40, valid: true }];
this.setSortColumn = function (column) {
if (this.sortColumn == column) {
this.reverse = !this.reverse;
}
else {
this.sortColumn = column;
this.reverse = false;
}
};
this.tableSort = function () {
return this.sortColumn;
};
}]);
</script>
<table ng-controller="sortableTableCtrl as ctrl" border="1">
<thead>
<tr>
<td ng-click="ctrl.setSortColumn('name')">Name</td>
<td ng-click="ctrl.setSortColumn('age')">Age</td>
<td ng-click="ctrl.setSortColumn('valid')">Valid</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="dtRow in ctrl.dtSource | orderBy:ctrl.tableSort():ctrl.reverse">
<td>{{dtRow.name}}</td>
<td>{{dtRow.age}}</td>
<td>{{dtRow.valid}}</td>
</tr>
</tbody>
</table>
</body>
Y eso es basicamente todo, this.setSortColumn recibe el nombre de la columna que se usara para ordenar la tabla, y de ser la misma aplica un reverse al orden
<body ng-app="sortTableApp">
<script>
var app = angular.module('sortTableApp', []);
app.controller('sortableTableCtrl', ['$scope', function ($scope) {
this.reverse = false;
this.sortColumn = 'name';
this.dtSource = [{ name: 'Pablo', age: 20, valid: true },
{ name: 'Raul', age: 30, valid: false },
{ name: 'Juan', age: 40, valid: true }];
this.setSortColumn = function (column) {
if (this.sortColumn == column) {
this.reverse = !this.reverse;
}
else {
this.sortColumn = column;
this.reverse = false;
}
};
this.tableSort = function () {
return this.sortColumn;
};
}]);
</script>
<table ng-controller="sortableTableCtrl as ctrl" border="1">
<thead>
<tr>
<td ng-click="ctrl.setSortColumn('name')">Name</td>
<td ng-click="ctrl.setSortColumn('age')">Age</td>
<td ng-click="ctrl.setSortColumn('valid')">Valid</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="dtRow in ctrl.dtSource | orderBy:ctrl.tableSort():ctrl.reverse">
<td>{{dtRow.name}}</td>
<td>{{dtRow.age}}</td>
<td>{{dtRow.valid}}</td>
</tr>
</tbody>
</table>
</body>
Y eso es basicamente todo, this.setSortColumn recibe el nombre de la columna que se usara para ordenar la tabla, y de ser la misma aplica un reverse al orden
Comentarios