Ordinamento dei menu a discesa in ordine alfabetico in AngularJS

158

Sto compilando un menu a discesa tramite l'uso di ng-options che è collegato a un controller che a sua volta sta chiamando un servizio. Purtroppo i dati che arrivano sono un disastro e devo essere in grado di ordinarli in ordine alfabetico.

Pensi che qualcosa del genere $.sortBylo farebbe, ma sfortunatamente non lo ha fatto. So di poterlo ordinare via javascript con un metodo di supporto function asc(a,b)o qualcosa del genere, ma mi rifiuto di credere che non ci sia un modo più pulito di farlo, inoltre non voglio gonfiare il controller con metodi di supporto. È qualcosa di così semplice in linea di principio, quindi non capisco perché AngularJS non lo abbia.

C'è un modo di fare qualcosa del genere $orderBy('asc')?

Esempio:

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

Sarebbe estremamente utile avere opzioni in orderBymodo da poter fare quello che vuoi, ogni volta che provi a ordinare i dati.

angularjs

— J Castillo
fonte

342

Angular ha un filtro OrderBy che può essere utilizzato in questo modo:

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

Vedi questo violino per un esempio.

Vale la pena notare che se track byviene utilizzato deve apparire dopo il orderByfiltro, in questo modo:

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

— gloopy
fonte

1

Guardare il violino (o aggiungere un tag di selezione dell'ordinamento al tutorial Angular ToDo), ottenere un'opzione da mostrare come 'selezionata' - o persino ottenere la prima opzione da mostrare - è un problema. Con Angular è vuoto?

— Dave Everitt,

2

@DaveEveritt un modo per impostare un valore predefinito (e rimuovere l'elemento vuoto) è preselezionare un elemento associato per selected. Per questo esempio puoi fare qualcosa del genere $scope.selected = $scope.friends[0]. Vedi questo violino per un campione funzionante.

— Gloopy

e se volessi age come valore in selezionato, non l'intero elemento JSON?

— Rishi

@Rishi prova questo per ng-options: f.age as f.name for f in friends | orderBy:'name'- ecco un violino funzionante. Maggiori informazioni su ng-options qui .

— Gloopy

7

@Gloopy, questa risposta mi ha permesso di ottenere il 90% del percorso. Ti dispiacerebbe aggiungere un caso per quando viene utilizzato track by? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Mettere track bydopo il filtro degli ordini non era intuitivo e questa risposta è il risultato di ricerca principale di Google.

— MushinNoShin,

26

Dovresti essere in grado di utilizzare il filtro: orderBy

orderBypuò accettare una terza opzione per la reversebandiera.

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

Qui l'articolo è ordinato per proprietà 'name' in ordine inverso. Il secondo argomento può essere qualsiasi funzione di ordine, quindi è possibile ordinare in qualsiasi regola.

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

— Tosh
fonte

6

O semplicemente <seleziona ng-option = "item.name per l'articolo negli articoli | orderBy: '- name'"> </select> Funziona troppo :)

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

— Tecnocrate
fonte

2

Un po 'di testo che spiega come questo risponde alla domanda del PO e / o come lo useresti sarebbe molto utile qui.

— Sean the Bean,

@SeantheBean ho già dato una demo di violino, quindi non ho dato spiegazioni.

— TechnoCrat,

2

@TechnoCrat Una spiegazione sarebbe comunque preferibile. In effetti, sarebbe particolarmente interessante sapere perché questa soluzione sarebbe preferita rispetto a quelle pubblicate anni prima. O, come differisce affatto ...

— Chipowski

@Chipowski ok. andando avanti cercherò di dare una spiegazione insieme alla risposta.

— TechnoCrat,

0

Per chiunque desideri ordinare la variabile nel terzo livello:

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

puoi farlo in questo modo

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

— Trieu Nguyen
fonte