Clasificación desplegable alfabéticamente en AngularJS

158

Estoy completando un menú desplegable mediante el uso de ng-options que está conectado a un controlador que a su vez está llamando a un servicio. Desafortunadamente, los datos que ingresan son un desastre y necesito poder ordenarlos alfabéticamente.

Te imaginas que algo así $.sortBylo haría, pero desafortunadamente no funcionó. Sé que puedo ordenarlo a través de JavaScript con un método auxiliar function asc(a,b)o algo así, pero me niego a creer que no haya una forma más limpia de hacerlo, además, no quiero inflar el controlador con métodos auxiliares. Es algo tan básico en principio que no entiendo por qué AngularJS no tiene esto.

¿Hay alguna forma de hacer algo así $orderBy('asc')?

Ejemplo:

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

Sería extremadamente útil tener opciones orderBypara que pueda hacer lo que quiera, siempre que generalmente intente ordenar los datos.

angularjs J castillo
fuente

Respuestas:

342

Angular tiene un filtro orderBy que se puede usar así:

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

Vea este violín para ver un ejemplo.

Vale la pena señalar que si track byse está utilizando, debe aparecer después del orderByfiltro, así:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></select>
Gloopy
fuente
1
Mirando el violín (o agregando una etiqueta de selección de clasificación al tutorial de Angular ToDo), obtener una opción para mostrar como 'seleccionado', o incluso obtener la primera opción para mostrar, es un problema. ¿Con Angular está en blanco?
Dave Everitt
2
@DaveEveritt una forma de establecer un valor predeterminado (y eliminar el elemento en blanco) es preseleccionar un elemento vinculado para selected. Para este ejemplo puedes hacer algo como $scope.selected = $scope.friends[0]. Vea este violín para una muestra de trabajo.
Gloopy el
¿Qué pasa si quiero edad como valor en seleccionado, no todo el elemento JSON?
Rishi
@Rishi probar esto por NG-opciones: f.age as f.name for f in friends | orderBy:'name'- aquí es un violín de trabajo. Más información sobre ng-options aquí .
Gloopy
77
@Gloopy, esta respuesta me llevó el 90% del camino. ¿Le importaría agregar un caso para cuando se utiliza el seguimiento por? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Poner el track byfiltro después del pedido no fue intuitivo y esta respuesta es el resultado de búsqueda superior de google.
MushinNoShin
26

Deberías poder usar filter: orderBy

orderBypuede aceptar una tercera opción para la reversebandera.

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

Aquí el artículo se ordena por propiedad 'nombre' en orden inverso. El segundo argumento puede ser cualquier función de orden, por lo que puede ordenar cualquier regla.

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

Tosh
fuente
66
O simplemente <select ng-option = "item.name para item en items | orderBy: '- name'"> </select> Funciona también :)
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/

Tecnócrata
fuente
2
Un texto que explique cómo responde esto a la pregunta del OP y / o cómo lo usaría sería muy útil aquí.
Sean the Bean
@SeantheBean Ya he dado la demostración de Fiddle, así que no he dado explicaciones.
TechnoCrat
2
@TechnoCrat Una explicación sería preferible de todos modos. De hecho, sería particularmente interesante saber por qué esta solución sería preferible a las publicadas años antes. O, en qué se diferencia en absoluto ...
Chipowski
@Chipowski ok. en adelante trataré de dar una explicación junto con la respuesta.
TechnoCrat
0

Para cualquiera que quiera ordenar la variable en la tercera capa:

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

puedes hacerlo asi

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