<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Exemple 2 du filtre orderBy</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderByExample">
<div ng-controller="OrderByController">
<pre>Prédicat utilisé = {{predicate}}; reverse = {{reverse}}</pre>
<hr />
[ <a ng-click="predicate=''" href="">non trié</a> ]
<table class="ami">
<tbody>
<tr>
<th>
<a ng-click="order('nom')" href="">Nom</a>
<span ng-class="{reverse:reverse}" ng-show="predicate === 'nom'" class="sortorder"></span>
</th>
<th>
<a ng-click="order('age')" href="">Âge</a>
<span ng-class="{reverse:reverse}" ng-show="predicate === 'age'" class="sortorder"></span>
</th>
<th>
<a ng-click="order('tel')" href="">Téléphone</a>
<span ng-class="{reverse:reverse}" ng-show="predicate === 'tel'" class="sortorder"></span>
</th>
</tr>
<tr ng-repeat="ami in amis | orderBy : predicate : reverse">
<td>{{ami.nom}}</td>
<td>{{ami.age}}</td>
<td>{{ami.tel}}</td>
</tr>
</tbody>
</table>
</div>
<style type="text/css">
.sortorder:after {
content: '\25b2';
}
.sortorder.reverse:after {
content: '\25bc';
}
</style>
</body>
</html>
# Exemple 2 du filtre orderBy
### *par TutorielAngularJS*
Exemple basique en utilisant un prédicat variable pour trié les données
Prédicat utilisé :
`predicate = 'age' || 'tel' || 'nom' `
----
Pour plus d'infos, voir [Les filtres - Tutoriel AngularJS](http://www.tutoriel-angularjs.fr/tutoriel/2-utilisation-complete-d-angularjs/2-les-filtres#orderBy)
'use strict';
angular.module('orderByExample', [])
.controller('OrderByController', ['$scope', function($scope) {
$scope.amis =
[{nom:'John', tel:'01-23-45-67-89', age:10},
{nom:'Mary', tel:'02-34-56-78-91', age:19},
{nom:'Mike', tel:'03-45-67-89-12', age:21},
{nom:'Adam', tel:'04-56-78-91-23', age:35},
{nom:'Julie', tel:'05-67-89-12-34', age:29}];
// On initialise le prédicat à 'age' et le l'ordre à décroissant
$scope.predicate = 'age';
$scope.reverse = true;
// fonction 'order' permettant de changer le prédicat et l'ordre
// à chaque clic sur les titres des colonnes
$scope.order = function(predicate) {
// si le prédicat n'a pas changé, c'est le que l'ordre doit être inversé.
// Sinon, on le laisse par défaut à 'croissant' (reverse = false)
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
}]);