AngularJS 按月过滤 JSON 数据

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

您只需要在选择tag 中选择model，然后您就可以根据所选值filter 您的事件数据。

您可以使用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;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

   <select ng-model="sel" ng-change="filter()">
      <option ng-repeat="month in months" value="{{month.number}}">{{month.month}}     </option>
   </select>

    
  {{events}}
</div>