Classificação suspensa em ordem alfabética no AngularJS

158

Estou preenchendo uma lista suspensa através do uso de ng-options, que está ligado a um controlador que, por sua vez, está chamando um serviço. Infelizmente, os dados que entram são uma bagunça e eu preciso ser capaz de classificá-los em ordem alfabética.

Você $.sortByacha que algo assim faria isso, mas infelizmente não deu certo. Eu sei que posso classificá-lo via javascript com um método auxiliar function asc(a,b)ou algo parecido, mas me recuso a acreditar que não há uma maneira mais limpa de fazer isso e não quero inchar o controlador com métodos auxiliares. É algo tão básico em princípio, então não entendo por que o AngularJS não tem isso.

Existe uma maneira de fazer algo assim $orderBy('asc')?

Exemplo:

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

Seria extremamente útil ter opções orderBypara que você possa fazer o que quiser, sempre que tentar classificar dados.

angularjs

— J Castillo
fonte

342

Angular tem um filtro orderBy que pode ser usado assim:

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

Veja este violino para um exemplo.

Vale ressaltar que, se track byestiver sendo usado, ele precisa aparecer após o orderByfiltro, assim:

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

— Gloopy
fonte

1

Olhando para o violino (ou adicionando uma marca de seleção de classificação ao tutorial Angular ToDo), obter uma opção para mostrar como 'selecionado' - ou até obter a primeira opção para mostrar - é um problema. Com Angular está em branco?

— 55660 Dave McMillan

2

@DaveEveritt Uma maneira de definir um padrão (e remover o item em branco) é pré-selecionar um item vinculado selected. Neste exemplo, você pode fazer algo parecido $scope.selected = $scope.friends[0]. Veja este violino para uma amostra de trabalho.

— perfil completo de Gloopy

e se eu quiser idade como valor no selecionado, não todo o elemento JSON?

— Rishi

@Rishi tente isso para ng-options: f.age as f.name for f in friends | orderBy:'name'- aqui está um violino de trabalho. Mais sobre as opções de ng aqui .

— Gloopy #

7

@ Glopy, esta resposta me levou 90% do caminho até lá. Você se importaria de adicionar um argumento para quando o track by é usado? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Colocar o track byfiltro após o pedido não foi intuitivo e esta resposta é o principal resultado de pesquisa do Google.

— MushinNoShin

26

Você deve poder usar o filtro: orderBy

orderBypode aceitar uma terceira opção para a reversebandeira.

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

Aqui, o item é classificado pela propriedade 'name' em uma ordem reversa. O segundo argumento pode ser qualquer função de ordem, para que você possa classificar qualquer regra.

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

— Tosh
fonte

6

Ou apenas <select ng-option = "item.name para item nos itens | orderBy: '- name'"> </select> Funciona muito :) :)

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

— Tecnocrata
fonte

2

Um texto explicando como isso responde à pergunta do OP e / ou como você a usaria seria muito útil aqui.

— Sean the Bean

@SeantheBean eu já dei demonstração de violino, então não dei explicação.

— TechnoCrat

2

@TechnoCrat Uma explicação seria preferível de qualquer maneira. De fato, seria particularmente interessante saber por que essa solução seria preferível às postadas anos antes. Ou, como ele difere em tudo ...

— Chipowski

@Chipowski ok. daqui para frente, tentarei dar uma explicação e uma resposta.

— TechnoCrat 15/02

0

Para quem deseja classificar a variável na terceira camada:

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

você pode fazer assim

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

— Trieu Nguyen
fonte