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.
(function() {
'use strict';
angular
.module('app')
.filter('filterRange', function () {
return function (input, min, max, step) {
step = parseInt(step) || 30000;
min = parseInt(min);
max = parseInt(max);
for (var i = min; i < max; i += step)
input.push(i);
return input;
};
});
})();
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)
<select ng-options="n for n in [] | filterRange:0:120000:30000"></select>
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.
(function() {
'use strict';
angular
.module('app', [])
.controller('ListHouseCtrl', ListHouseCtrl);
ListHouseCtrl.$inject = [];
function ListHouseCtrl() {
var vm = this;
vm.selectPrice = {
min: 30000,
max: 120000
}
vm.log = function() {
console.log(vm.selectPrice);
}
}
})();
A ambos <select> le asignamos su modelo para obtener el valor seleccionado, que en su primera carga será el valor por defecto.
<select ng-model="vm.selectPrice.min" ng-options="n for n in [] | filterRange:0:120000:30000"></select>
<select ng-model="vm.selectPrice.max" ng-options="n for n in [] | filterRange:150000:250000:30000"></select>
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.
<select ng-model="vm.selectPrice.min" ng-options="n for n in [] | filterRange:0:vm.selectPrice.max:30000"></select>
<select ng-model="vm.selectPrice.max" ng-options="n for n in [] | filterRange:vm.selectPrice.min+30000:250000:30000"></select>
El código se encuentra en mi repositorio de GitHub.
Vídeo de campos relacionados en AngularJS 1