Sortowanie listy rozwijanej alfabetycznie w AngularJS

158

Wypełniam listę rozwijaną za pomocą opcji ng-options, która jest podłączona do kontrolera, który z kolei wywołuje usługę. Niestety napływające dane są bałaganem i muszę być w stanie posortować je alfabetycznie.

Myślisz, że coś takiego $.sortByby to zrobiło, ale niestety nie zrobiło to jack. Wiem, że mogę to posortować za pomocą javascript za pomocą metody pomocniczej function asc(a,b)lub czegoś podobnego, ale nie wierzę, że nie ma na to czystszego sposobu, a ponadto nie chcę nadużywać kontrolera metodami pomocniczymi. Jest to w zasadzie coś tak podstawowego, że nie rozumiem, dlaczego AngularJS tego nie ma.

Czy jest sposób na zrobienie czegoś takiego $orderBy('asc')?

Przykład:

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

Niezwykle przydatne byłoby posiadanie opcji, orderBydzięki którym możesz robić, co chcesz, za każdym razem, gdy zwykle próbujesz sortować dane.

angularjs

— J Castillo
źródło

342

Angular ma filtr orderBy, którego można użyć w następujący sposób:

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

Zobacz na przykład to skrzypce .

Warto zauważyć, że jeśli track byjest używany, musi pojawić się za orderByfiltrem, na przykład:

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

— Gloopy
źródło

1

Patrząc na skrzypce (lub dodając tag sortowania wyboru do samouczka Angular ToDo), uzyskanie opcji pokazania jako `` wybrane '' - lub nawet uzyskanie pierwszej opcji do pokazania - jest problemem. Z Angularem jest puste?

— Dave Everitt,

2

@DaveEveritt Jednym ze sposobów ustawienia wartości domyślnej (i usunięcia pustego elementu) jest wstępne wybranie powiązanego elementu dla selected. W tym przykładzie możesz zrobić coś takiego $scope.selected = $scope.friends[0]. Zobacz te skrzypce dla próbki roboczej.

— Gloopy

co zrobić, jeśli chcę, aby jako wartość wybrano wiek, a nie cały element JSON?

— Rishi

@Rishi spróbuj tego dla ng-options: f.age as f.name for f in friends | orderBy:'name'- oto działające skrzypce. Więcej na temat opcji ngowych tutaj .

— Gloopy

7

@Gloopy, ta odpowiedź doprowadziła mnie do tego w 90%. Czy możesz dodać przypadek, kiedy używana jest funkcja śledzenia? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Umieszczanie track byfiltra po zamówieniu nie było intuicyjne, a ta odpowiedź jest najlepszym wynikiem wyszukiwania w Google.

— MushinNoShin

26

Powinieneś być w stanie użyć filtra: orderBy

orderBymoże zaakceptować trzecią opcję dla reverseflagi.

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

Tutaj element jest sortowany według właściwości „nazwa” w odwrotnej kolejności. Drugim argumentem może być dowolna funkcja porządkowa, więc możesz sortować według dowolnej reguły.

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

— Bzdury
źródło

6

Lub po prostu <select ng-option = "item.name for item in items | orderBy: '- name'"> </select> Działa też :)

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

— TechnoCrat
źródło

2

Bardzo pomocny byłby tutaj tekst wyjaśniający, w jaki sposób odpowiada to na pytanie PO i / lub jak go użyjesz.

— Sean the Bean

@SeantheBean Dałem już demo skrzypiec, więc nie wyjaśniłem.

— TechnoCrat

2

@TechnoCrat Wyjaśnienie i tak byłoby lepsze. W rzeczywistości byłoby szczególnie interesujące wiedzieć, dlaczego to rozwiązanie byłoby preferowane w stosunku do tych opublikowanych lata wcześniej. Albo, jak to w ogóle różni ...

— Chipowski

@Chipowski ok. Idąc dalej postaram się udzielić wyjaśnień wraz z odpowiedzią.

— TechnoCrat

0

Dla każdego, kto chce posortować zmienną w trzeciej warstwie:

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

możesz to zrobić w ten sposób

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

— Trieu Nguyen
źródło