AngularJS orderBy filter

AngularJS Reference Manual

Definitie en gebruik

orderBy Filters laten ons de array sorteren.

Standaard worden strings in alfabetische volgorde gesorteerd en cijfers in numerieke volgorde gesorteerd.

Gerelateerde pagina's

AngularJS Handleiding:Angular Filters

Voorbeeld

Voorbeeld 1

Toon items in alfabetische volgorde:

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

Probeer het zelf

Voorbeeld 2

Op "city" de array sorteren:
<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 Comidas para llevar", "city" : "Buenos Aires"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Probeer het zelf

Voorbeeld 3

Op "city" de array in aflopende volgorde sorteren:
<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 Comidas para llevar", "city" : "Buenos Aires"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Probeer het zelf

Syntax

{{ array | orderBy : expression : reverse }}

Parameters

Parameters Description
expression

Uitdrukkingen die de volgorde bepalen. Uitdrukkingen kunnen van de volgende typen zijn:

String: Als de array een objectarray is, kun je de array sorteren op de waarde van een van de objecteigenschappen. Zie de voorbeeld hierboven.

Functie: Je kunt een functie maken om de sortering te organiseren.

Array: Als je meerdere objecteigenschappen wilt gebruiken om de volgorde te bepalen, gebruik dan een array. Array-items kunnen strings en functies zijn.
reverse Optioneel. Als je de volgorde van de array wilt omkeren, stel dan true in.

AngularJS Reference Manual