Question

我想知道是否有办法通过使用包含所有12个月的列表的下拉列表来过滤JSON数据，并按月过滤列出的结果。我已经有一个过滤器来过滤数据，在我的情况下，这些数据是一个很大的事件列表......按照相应的类型。但是还没有找到一种方法来使用下拉列表按月过滤数据。

数据如下：

$scope.events = [{
      "id": "4330",
      "title": "Sweet Diezel Jenkins",
      "subtitle": null,
      "date": "2018-05-25 21:00:00",
},
{
      "id": "6401",
      "title": "Patricia Avis",
      "subtitle": null,
      "date": "2018-06-29 21:00:00"
}]

我抓住了两个对象作为数据设置方式的示例。正如您所看到的，列出了5月份的活动和6月份列出的活动。

我试图创建一个过滤器功能，也使用循环来使其工作，但似乎没有任何效果。我在示例中注意到，我发现最好的方法是创建一个自定义Angular过滤器，但由于我对AngularJS很新，所以在实现本月下拉过滤器时我很失落。

我很好奇是否有一个可以在AngularJS中创建的简单过滤器，它可以按月下拉过滤这些数据。

Answer 1

您只需选择get_dir()中的model，然后根据所选值filter提供事件数据。

每次在

中选择不同的值时，您都可以使用tag指令运行过滤器功能

ng-change

angular.module('app',[]).controller('ctrl', function($scope){

var events = [{
      "id": "4330",
      "title": "Sweet Diezel Jenkins",
      "subtitle": null,
      "date": "2018-05-25 21:00:00",
},
{
      "id": "6401",
      "title": "Patricia Avis",
      "subtitle": null,
      "date": "2018-06-29 21:00:00"
}];

$scope.events = events;
$scope.months = [{number : 1, month: 'Jan'},{number : 2, month: 'Feb'},{number : 3, month: 'Mar'},{number : 4, month: 'April'},{number : 5, month: 'May'},{number : 6, month: 'June'},{number : 7, month: 'Jul'},{number : 8, month: 'Aug'},{number : 9, month: 'Sep'},{number : 10, month: 'Oct'},{number : 11, month: 'Nov'},{number : 12, month: 'Dec'}];
//$scope.sel= 1;

$scope.filter = function(){

$scope.events = events.filter(o=> new Date(o.date).getMonth() +1 == $scope.sel)

}

//$scope.filter();
})

select{
 margin-bottom : 30px;
 display: block;
}

AngularJS按月下拉列表过滤JSON数据

1 个答案: