programador

iván albizu

Main Blog

Blog

Dos campos Select relacionados en AngularJS

Dos campos Select relacionados en AngularJS

He construido sistema de filtros con etiquetas <select>. Uno de ellos será el filtro inferior y el otro el filtro superior. Ambos estarán relacionados entre sí para que no se pisen los valores, y así el valor tomado por el filtro inferior sea uno de los límites del filtro superior, y viceversa.

Para darle valores a los <select> he construido un filtro que recibe tres parámetros. Los dos primeros parámetros, “min” y “max”, son los límites inferiores y superiores. El tercer parámetro, “step”, será la separación entre cada uno de los valores, que caso de no especificarse este valor tomará el valor 30000.

La forma de usarla es sencilla. Se usará la directiva “ng-options” de AngularJS que genera los diferentes valores seleccionables. Le pasamos un array vacío y le aplicamos el filtro. (Ojo, el uso de la directiva ng-options requiere también la definición de ng-model. En este trozo de código no lo puse)

En el controlador definimos una variable para usarlo en la vista como modelo. Con valores mínimos y máximos definidos con valor para que se carguen los valores por defecto.

A ambos <select> le asignamos su modelo para obtener el valor seleccionado, que en su primera carga será el valor por defecto.

Ahora mismo se rellenan ambos <select>, el primero termina en 120000 y el segundo empieza en 150000. Pero podemos aprovechar los valores que hemos guardado en ng-model=”vm.selectPrice.min” y en ng-model=”vm.selectPrice.max” para los límites de los filtros.

El código se encuentra en mi repositorio de GitHub.

El vídeo:

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.