按日期范围过滤结果 Angular Material答案

【问题标题】：Filter results by date range Angular Material按日期范围过滤结果 Angular Material
【发布时间】：2017-06-03 00:01:01
【问题描述】：

我希望你能帮助我我对 Angular Material

很陌生

我有一个包含 N 个结果的表格，我正在尝试对一系列日期进行过滤。我有一个 select 选项（1 天、5 天、1 周、15 天），其中加载了一个变量

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>

老实说，我不知道如何执行过滤器以显示所选范围内的结果

在这个函数中，我收集选择的值

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

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

      }
      vm.showLastMovements(filterSend);
  }

JSON

{
  "result": {
    "httpCode": 200,
    "httpMessage": "OK",
    "moreInformation": ""
  },
  "data": {
    "movements": [
      {
        "operationDate": "2017-01-18",
        "concept": "Decathlon",
        "amount": "-450.0",
        "currency": "EUR",
        "balance": "29150.0",
        "category": 1
      },
      {
        "operationDate": "2017-01-18",
        "concept": "Corte Ingles",
        "amount": "-259.0",
        "currency": "EUR",
        "balance": "34000.0",
        "category": 2
      },
      {
        "operationDate": "2017-01-15",
        "concept": "Carrefour",
        "amount": "348.0",
        "currency": "EUR",
        "balance": "12000.0",
        "category": 1
      },
      {
        "operationDate": "2017-01-01",
        "concept": "Corte Ingles",
        "amount": "-259.0",
        "currency": "EUR",
        "balance": "34000.0",
        "category": 2
      },
      {
        "operationDate": "2016-12-30",
        "concept": "Cortefiel",
        "amount": "348.0",
        "currency": "EUR",
        "balance": "12000.0",
        "category": 1
      }

    ]
  }
}

在这个带有警报的函数中，显示选择的值。

如果您能帮助我或至少提供一些信息来创建此功能，然后从案例中调用以显示该选择的记录，我将不胜感激。

非常感谢

【问题讨论】：

您尝试使用该范围过滤的内容是什么？
我有一个包含多个结果（类别、日期、描述、价格）的列表，我尝试使用此过滤器显示取决于我选择的内容（1 天、5 天、1 周或 15 天）最新的。实际上我正在使用 JSON 来显示列表，你问我这个？
我不确定我是否理解，使用过滤器要根据范围过滤结果。是否要将所选范围与结果内容的日期进行比较？
我有一个带有选择功能的表单来进行过滤。在表格中，首先显示所有结果，使用此过滤器，我试图显示从今天到“一天前或五天前或一周前或 15 天前”之间的结果。我现在解释得更好了吗？
是的！能否请您将表格的相关信息添加到帖子中？

标签： angularjs html css angular

【解决方案1】：

这将是您的 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>

假设这是您通过 data.movements 列表进行的表迭代

  <tr md-row  ng-repeat="movement in data.movements | filter: customFilter">
    <td md-cell>{{movement}}</td>
  </tr>

控制器：

function customFilter(movement){
   var movementDate = new Date (movement.operationDate);
   var filterDate= new Date();
   filterDate.setDate(filterDate.getDate() - vm.rangoSelected.value) //In here you will have to transform the rangoSelected.value to days.
   return (movementDate.getTime() > filterDate.getTime()); //this will return true if the movement's date is bigger than your selected range.
}

请记住，getTime() 返回自 1970/01/01 以来的毫秒数。这将帮助您进行范围计算。

【讨论】：