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

问题描述:

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

I have an angular app which will displayed data from database, the app will fetch the data as json from the server.

我有一个复选框和2个 input type = date 的形式,其中一个是开始日期,另一个是结束日期,该复选框将启用或禁用那些 input type = date .

in the form i have a checkbox and 2 input type=date which is one is start date and the other is end date, the checkbox will enable or disable those input type=date.

因此,我将从数据库中获取所有数据,每当用户启用该复选框时,他们将选择日期,并且该应用程序将根据其选择进行过滤,如果未选中该复选框,则该应用程序将显示所有数据.

So i will fetch all data from database, whenever the user enable the checkbox, they will have select the date and the app will filter based on their selection, if checkbox unchecked then the app will displayed all data.

这就是我填充数据的方式

This is how i populate the data

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和< = enddate

So when the input type date is change, how can i just display the data in Tablelist according to the selected start and end date >=startdate and <=enddate

是否可以使用内置的 filterFilter ?如果是的话,请指出正确的方向.

Is it possible to use the builtin filterFilter? if yes, kinda point me to the right direction.

此处是如何在日期之间进行过滤,关键是您在文档中看到的过滤器具有功能.

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

The filter function I created looks like:

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中获得).我要做的只是使用逻辑运算符.

So the value is the current object to compare, I have chosen two arbitrary dates (these can be gotten from the UI). All I do is just use the logical operators.

如果您从该函数返回true ,那么您说的是保留它.如果您返回假,那么您说的不对!

If you return true from the function then you are saying keep it. if you return false then you are saying 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'));
}

简单的日子.

哦,UI很简单:

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

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

It use the pipe symbol | to defined the next part is going to be a filter of some kind. We use the filter filter (Yes, that is how stupid angular 1 is....) Then we just pass the vm.range function expression to this filter and it will be executed against each object, very similar to a foreach

在示例中,如果在 $ http 响应中返回,则由于双向绑定,您仍然可以像我一样执行UI $ scope.Tablelist 更新后,筛选器将重新在顶部运行.请记住,这对于大型数据集而言并不是很有效,因此您可能需要将过滤器添加到javascript中:

In relation to your example of if being returned in the $http response, you can still do the UI the same as mine, because of two-way binding as soon as $scope.Tablelist is updated, the filter is re-run over the top. Just remember this isn't very performant for large data sets, so you may want to pull the filter into the javascript:

$scope.Tablelist = $filter('filter')(response.data, $scope.range);

为什么与UI相比,它的性能更高?因为在过滤数据之前不会导致不必要的UI重排,所以我不确定过滤器是否在UI中执行了此操作,但是我知道不会.

Why is this more performant then in the UI. Because it doesn't cause unnecessary UI reflow till the data is filtered, I am unsure as to whether the filter does this in the UI, but I know this won't.

查看全文
登录 关闭
扫码关注1秒登录
新用户极速验证 | 老用户无需验证