Ordenar la lista desplegable alfabéticamente en AngularJS

143

Estoy poblando 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, la información que entra es un desastre y necesito poder ordenarla alfabéticamente.Ordenar la lista desplegable alfabéticamente en AngularJS

Se da cuenta de que algo así como $.sortBy lo haría, pero desafortunadamente no hizo jack. Sé que puedo ordenarlo a través de javascript con un método de ayuda function asc(a,b) o algo así, pero me niego a creer que no haya una manera más clara de hacerlo y no quiero hinchar el controlador con métodos de ayuda. Es algo tan básico en principio, así que no entiendo por qué AngularJS no tiene esto.

¿Hay alguna manera de hacer algo como $orderBy('asc')?

Ejemplo:

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

Sería muy útil tener opciones en orderBy para que pueda hacer lo que quiera, siempre que por lo general intenta ordenar los datos.

Fuente

2012-09-07 J Castillo

304

angular tiene un filtro de orderBy que se puede utilizar de esta manera:

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

Ver this fiddle para un ejemplo.

Vale la pena señalar que si se está utilizando track by que necesita para aparecer después del filtro orderBy, así:

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

Fuente

2012-09-07 03:02:13 Gloopy

Mirando en el violín (o agregar una etiqueta de selección de ordenamiento al tutorial de Topo angular), 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? –

@DaveEveritt una forma de establecer un valor predeterminado (y para eliminar el elemento en blanco) es preseleccionar un elemento vinculado para 'seleccionado'. Para este ejemplo, puede hacer algo como '$ scope.selected = $ scope.friends [0]'. Ver [este violín] (http://jsfiddle.net/aBccw/142/) para una muestra de trabajo. – Gloopy

no funcionó para mí, pero esto sí: http://stackoverflow.com/a/18261445/2178340 – Gerson

Usted debe ser capaz de usar filtro: orderBy

orderBy puede aceptar una tercera opción para el indicador reverse.

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

Este elemento está ordenado por la propiedad 'nombre' en orden inverso. El segundo argumento puede ser cualquier función de orden, por lo que puede ordenar cualquier regla.

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

Fuente

2012-09-07 03:14:40 Tosh

O simplemente Funciona también :) – Mahbub

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/

Fuente

2015-02-26 17:06:20 TechnoCrat

Un poco de texto que explica cómo Esto responde a la pregunta del OP y/o cómo lo usaría sería muy útil aquí. –

@SeantheBean ya he dado la demostración de violín así que no he dado ninguna explicación. – TechnoCrat

@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, cómo difiere en absoluto ... – Chipowski

Para cualquier persona que quiera ordenar la variable en la tercera capa:

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

que puede hacerlo de esta manera

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

Fuente

2018-03-07 04:47:02

Ordenar la lista desplegable alfabéticamente en AngularJS

Respuesta

Cuestiones relacionadas