Question

我希望你能帮助我，我是 Angular Material

的新手

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

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>

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

在此功能中，我收集所选

的值

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
      }

    ]
  }
}

在这个带警报的功能中，显示选择的值。

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

非常感谢

Answer 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以来的毫秒数。这将有助于您进行范围计算。

按日期范围过滤结果Angular Material

1 个答案: