Filtre orderBy AngularJS

Définition et utilisation

orderBy Les filtres nous permettent de trier les tableaux.

Par défaut, les chaînes sont triées par ordre alphabétique et les nombres par ordre numérique.

Pages associées

Tutoriel AngularJS :Filtres Angular

Exemple

Exemple 1

Afficher les éléments en ordre alphabétique :

<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
);
</script>

Essayez-le vous-même

Exemple 2

Trier les éléments par ordre alphabétique de "city":
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : 'city'">{{x.name + ", " + x.city}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Bottom-Dollar Marketse", "city" : "Tsawassen"},
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Repas à emporter", "city" : "Buenos Aires"},
        {"name" : "Bolido Repas préparés", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Essayez-le vous-même

Exemple 3

Trier les éléments par ordre décroissant de "city":
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : '-city'">{{x.name + ", " + x.city}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Bottom-Dollar Marketse", "city" : "Tsawassen"},
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Repas à emporter", "city" : "Buenos Aires"},
        {"name" : "Bolido Repas préparés", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Essayez-le vous-même

Syntaxe

{{ array | orderBy : expression : reverse }}

Paramètres