AngularJS – Utilizar una función en la expresión ‘group by’ de un elemento ‘select’

octubre 27, 2014

Para desplegar una lista de opciones agrupadas por un atributo en AngularJS, puedes utilizar el elemento select de la siguiente manera

<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
  </select>

Pero ¿qué pasa si tu modelo no contiene un atributo que te permita agrupar los elementos? sino más bien, depende de algún cálculo, varios atributos o cualquier otra condición. Bueno, pues resulta que la cláusula group by es una expresión de AngularJS, esto nos permite utilizar una función para agrupar los elementos. Un ejemplo sería de la siguiente forma.
Supongamos que tenemos el modelo

    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];

Y queremos crear grupos de acuerdo a la longitud del nombre. Lo haríamos de la siguiente manera

<select ng-model="myColor" ng-options="color.name group by longitud(color) for color in colors"></select>

y en nuestro controlador

        $scope.longitud = function(color){
            var grupo
            switch (color.name.length){
                case 5: grupo = 'Cinco letras'
                    break
                case 4: grupo = 'Cuatro letras'
                    break
                case 3: grupo = 'Tres letras'
                    break
                default: grupo = 'Otro'
            }
            return grupo
        }

De esta forma puedes utilizar cualquier condición para crear los grupos que necesites.

Fuentes:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: