Dropdown-Liste alphabetisch in AngularJS

158

Ich fülle ein Dropdown-Menü mithilfe von ng-options aus, das an einen Controller angeschlossen ist, der wiederum einen Dienst aufruft. Leider sind die eingehenden Daten ein Chaos und ich muss sie alphabetisch sortieren können.

Sie denken, dass so etwas $.sortByes tun würde, aber leider hat es Jack nicht getan. Ich weiß, dass ich es mit einer Hilfsmethode function asc(a,b)oder ähnlichem über Javascript sortieren kann , aber ich weigere mich zu glauben, dass es keinen saubereren Weg gibt, dies zu tun, und ich möchte den Controller nicht mit Hilfsmethoden aufblähen. Es ist im Prinzip so grundlegend, dass ich nicht verstehe, warum AngularJS dies nicht hat.

Gibt es eine Möglichkeit, so etwas zu tun $orderBy('asc')?

Beispiel:

<select ng-option="items in item.$orderBy('asc')"></select>

Es wäre äußerst nützlich, Optionen zu haben, orderBydamit Sie tun können, was Sie wollen, wann immer Sie normalerweise versuchen, Daten zu sortieren.

angularjs J Castillo
quelle

Antworten:

342

Angular verfügt über einen orderBy- Filter, der folgendermaßen verwendet werden kann:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name'"></select>

Ein Beispiel finden Sie in dieser Geige .

Es ist erwähnenswert, dass bei track byVerwendung nach dem orderByFilter Folgendes angezeigt werden muss:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></select>
Gloopy
quelle
1
Wenn Sie sich die Geige ansehen (oder dem Angular ToDo-Lernprogramm ein Sortierauswahl-Tag hinzufügen), ist es ein Problem, eine Option zu erhalten, die als "ausgewählt" angezeigt wird - oder sogar die erste Option, die angezeigt wird. Mit Angular ist es leer?
Dave Everitt
2
@ DaveEveritt Eine Möglichkeit, einen Standard festzulegen (und das leere Element zu entfernen), besteht darin, ein gebundenes Element für vorauszuwählen selected. In diesem Beispiel können Sie so etwas tun $scope.selected = $scope.friends[0]. In dieser Geige finden Sie ein funktionierendes Beispiel.
Gloopy
Was ist, wenn ich Alter als Wert in ausgewählten, nicht im gesamten JSON-Element möchte?
Rishi
@ Rishi versuchen Sie dies für ng-Optionen: f.age as f.name for f in friends | orderBy:'name'- Hier ist eine funktionierende Geige. Mehr zu ng-Optionen hier .
Gloopy
7
@Gloopy, diese Antwort hat mich zu 90% dorthin gebracht. Würde es Ihnen etwas ausmachen, einen Fall hinzuzufügen, wenn Track by verwendet wird? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Das Setzen track bynach der Bestellung Filter war nicht intuitiv und diese Antwort ist das Top-Suchergebnis von Google.
MushinNoShin
26

Sie sollten in der Lage sein, Filter zu verwenden: orderBy

orderBykann eine dritte Option für die reverseFlagge akzeptieren .

<select ng-option="item.name for item in items | orderBy:'name':true"></select>

Hier wird das Element in umgekehrter Reihenfolge nach der Eigenschaft 'name' sortiert. Das zweite Argument kann eine beliebige Ordnungsfunktion sein, sodass Sie nach einer beliebigen Regel sortieren können.

@see http://docs.angularjs.org/api/ng.filter:orderBy

Tosh
quelle
6
Oder einfach <select ng-option = "item.name für item in items | orderBy: '- name'"> </ select> Funktioniert auch :)
Mahbub
2 
var module = angular.module("example", []);

module.controller("orderByController", function ($scope) {
    $scope.orderByValue = function (value) {
        return value;
    };

    $scope.items = ["c", "b", "a"];
    $scope.objList = [
        {
            "name": "c"
        }, {
            "name": "b"
        }, {
            "name": "a"
        }];
        $scope.item = "b";
    });

http://jsfiddle.net/Nfv42/65/

Technokrat
quelle
2
Ein bisschen Text, der erklärt, wie dies die Frage des OP beantwortet und / oder wie Sie es verwenden würden, wäre hier sehr hilfreich.
Sean the Bean
@SeantheBean Ich habe bereits eine Geigen-Demo gegeben, daher habe ich keine Erklärung gegeben.
TechnoCrat
2
@TechnoCrat Eine Erklärung wäre sowieso vorzuziehen. In der Tat wäre es besonders interessant zu wissen, warum diese Lösung den vor Jahren veröffentlichten vorgezogen wird. Oder wie es sich überhaupt unterscheidet ...
Chipowski
@Chipowski ok. In Zukunft werde ich versuchen, eine Erklärung zusammen mit einer Antwort zu geben.
TechnoCrat
0

Für alle, die die Variable in der dritten Ebene sortieren möchten:

<select ng-option="friend.pet.name for friend in friends"></select>

Sie können es so machen

<select ng-option="friend.pet.name for friend in friends | orderBy: 'pet.name'"></select>
Trieu Nguyen
quelle