filter results by date range Angular Material

1

Good, let's see if you can help me, I'm very green with Angular Material

I have a table with N records and I am trying to filter by a range of dates. I have a select with the options (1 day, 5 days, 1 week, 15 days), which are loaded with a veriable

JS

vm.rangos=[
     {id:"1",name:'1 día',value:'1'},
     {id:"2",name:'5 días',value:'5'},
     {id:"3",name:'1 Semana',value:'7'},
     {id:"4",name:'15 días',value:'15'}
  ];

HTML

<div layout="row" flex="90" layout-align="start center">
                        <label flex="25">Rango</label>
                        <select flex="60" ng-model="vm.rangoSelected" placeholder="" ng-options="ran.name for ran  in vm.rangos" class="selectPersonalizado ">
                        </select>
                    </div>

and I honestly do not know how to do the function to perform the filter to show the results within the selected range

In this function I pick up the value of the selected thing

function sendFilter(){
      var filterSend = "";
      switch(vm.filterSelected){

          case 'rango':
            filterSend = vm.rangoSelected.value;
          break;
          default:
            alert('no hecho');
          break;

      }
      vm.showLastMovements(filterSend);
  }

In which with the alert, I get the value of the select well.

If you can help me or at least give some clue to create this function and then make the call from case to show the resgistros of that selection I would appreciate it.

Thank you very much

    
asked by derek 18.01.2017 в 11:03
source

1 answer

1

I do not understand very well the purpose of your switch, but I imagine that it is to know if a filter has been selected and applied or not. For that, a simple if would suffice. I'll explain how I have a similar filter mounted.

In the select, I have the first option as 'Do not filter' with the value NO, and then I put the rest of the options. In the controller I initialize vm.rangoSelected = 'NO':

<select ng-model="vm.rangoSelected">
  <option value="NO">No filtrar</option>
  <option ng-repeat="ran in vm.rangos" value="{{ran.value}}">{{ran.name}}</option>
</select>

Next, I pass the selected value to the filter function. Your filter function should do something similar to this:

function filtrar(lista, rango){
  var inicio = // la fecha - rango.
  var fin = // la fecha + rango.
  if(rango === 'NO') {
    return lista;
  } else {
    return lista.filter(function(elemento){ 
      return elemento.fecha >= inicio && elemento.fecha <= fin;
    });
  }
)

To work with dates I recommend moment.js with which you can add dates easily: moment().add(7, 'days'); or check if a date is within the range: fecha.isBetween(inicio, fin);

    
answered by 25.01.2017 / 11:53
source