Question

我有一个角度应用程序，它将显示数据库中的数据，应用程序将从服务器获取数据为json。

在表单中我有一个复选框和2 input type=date，其中一个是start date而另一个是end date，复选框将启用或禁用input type=date。< / p>

所以我将从数据库中获取所有数据，每当用户启用复选框时，他们将选择日期，应用程序将根据他们的选择进行过滤，如果未选中复选框，则应用程序将显示所有数据。

这是我填充数据的方式

app.js

$http({
  method: 'POST',
  url: "api/Enquiry.php",
  data: {
    matcode:matcode,
    location: location,
  },
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  }
}).then(function(response){
  $scope.Tablelist = response.data;
  console.log(JSON.stringify(response.data));
}, function(response){
  console.log("failed");
})

因此，当输入类型日期发生变化时，如何根据所选的开始和结束日期>=startdate and <=enddate

显示表列表中的数据

是否可以使用内置filterFilter？如果有，请指出我正确的方向。

Answer 1

Here是您在日期之间进行过滤的方式，关键是您在文档中看到的filter函数。

我创建的过滤器功能如下：

vm.range = function (value, index, array) {
  if (value.date < new Date('2016-05-12T12:00:00Z') && value.date > new Date('2016-05-12T09:00:00Z')) {
    return true;
  }

  return false;
}

因此该值是要比较的当前对象，我选择了两个任意日期（这些日期可以从UI获得）。我只是使用逻辑运算符。

如果您return true来自该功能，那么您就是说保留它。如果你return false那么你就是在说nope！

这可以简化为：

vm.range = function (value, index, array) {
  return (value.date < new Date('2016-05-12T12:00:00Z') && value.date > new Date('2016-05-12T09:00:00Z'));
}

简单的日子。

哦，用户界面很简单：

<li ng-repeat="f in vm.original | filter: vm.range">
  {{f.date}}
</li>

使用管道符号|来定义下一部分将是某种过滤器。我们使用过滤器过滤器（是的，这就是愚蠢的角度1是......）然后我们只是将vm.range函数表达式传递给这个过滤器，它将针对每个对象执行，非常类似于{{ 1}}

关于您在foreach响应中返回的示例，您仍可以使用与我相同的用户界面，因为$http更新two-way后会立即更新，过滤器重新在顶部运行。请记住，这对于大型数据集来说效率不高，因此您可能希望将过滤器拉入javascript：

$scope.Tablelist

为什么这在UI中更具性能。因为在过滤数据之前它不会导致不必要的UI重排，所以我不确定过滤器是否在UI中执行此操作，但我知道这不会。

Angularjs根据日期范围过滤JSON数据

1 个答案: