Filtro orderBy AngularJS

Definizione e uso

orderBy I filtri ci permettono di ordinare gli array.

Per impostazione predefinita, le stringhe vengono ordinate in ordine alfabetico, i numeri in ordine numerico.

Pagine correlate

Guida AngularJS:Filtro Angular

Esempio

Esempio 1

Mostra gli elementi in ordine alfabetico:

<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>

Esempio 2

Ordina l'array per "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" : "Berlino"},
        {"name" : "Bon app", "city" : "Marsiglia"},
        {"name" : "Cactus Cibi da portare via", "city" : "Buenos Aires"},
        {"name" : "Bolido Cibi preparati", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "Around the Horn", "city" : "London"}
    {"name" : "B's Beverages", "city" : "London"}
]];
);

</script>

Esempio 3

Ordina in ordine decrescente l'array per "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" : "Berlino"},
        {"name" : "Bon app", "city" : "Marsiglia"},
        {"name" : "Cactus Cibi da portare via", "city" : "Buenos Aires"},
        {"name" : "Bolido Cibi preparati", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "Around the Horn", "city" : "London"}
    {"name" : "B's Beverages", "city" : "London"}
]];
);

</script>

Prova personalmente

Sintassi {{ array Descrizione | orderBy : Array: Se è necessario determinare l'ordine di sortatura di più proprietà di oggetti, utilizzare un array. Gli elementi dell'array possono essere stringhe e funzioni. :

}}