AngularJS orderBy-Filter

AngularJS-Referenzhandbuch

Definition und Verwendung

orderBy Filter ermöglichen es uns, Arrays zu sortieren.

Standardmäßig werden Zeichenfolgen alphabetisch und Zahlen numerisch sortiert.

Verwandte Seiten

AngularJS-Anleitung:Angular-Filter

Beispiel

Beispiel 1

Elemente alphabetisch anzeigbar:

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

Versuchen Sie es selbst

Beispiel 2

Array nach "city" sortieren:
<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 Markt", "city" : "Tsawassen"},
        {"name" : "Alfreds Vorratskiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Mitgenommene Speisen", "city" : "Buenos Aires"},
        {"name" : "Bolido Vorbereitete Speisen", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Versuchen Sie es selbst

Beispiel 3

Array nach "city" absteigend sortieren:
<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 Markt", "city" : "Tsawassen"},
        {"name" : "Alfreds Vorratskiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Mitgenommene Speisen", "city" : "Buenos Aires"},
        {"name" : "Bolido Vorbereitete Speisen", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Versuchen Sie es selbst

Syntax

{{ array | orderBy : expression : reverse }}

Parameter

Parameter Beschreibung
expression

Ausdrücke zur Bestimmung der Reihenfolge. Ausdrücke können folgende Typen sein:

String: Wenn ein Array aus Objektarrays besteht, kann das Array nach dem Wert eines Objektattributs sortiert werden. Siehe obenstehendes Beispiel.

Funktion: Sie können eine Funktion erstellen, um die Sortierung zu organisieren.

Array: Wenn mehrere Objektattribute zur Bestimmung der Sortierreihenfolge erforderlich sind, wird ein Array verwendet. Array-Elemente können Strings und Funktionen sein.
reverse Optional. Wenn die Reihenfolge der Liste umgekehrt werden soll, wird auf true gesetzt.

AngularJS-Referenzhandbuch