AngularJS фильтрует данные JSON по выпадающему месяцу

Question

Мне интересно, есть ли способ отфильтровать данные JSON, используя раскрывающийся список, содержащий список всех 12 месяцев, и фильтровать перечисленные результаты по месяцам.У меня уже есть фильтр, который фильтрует данные, которые в моем случае представляют собой большой список событий ... по их соответствующему типу.Но я не смог найти способ фильтрации данных по месяцам с помощью раскрывающегося списка.

Данные идут следующим образом:

$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"
}]

Я взял два объекта здесь в качестве примеракак данные настроены.Как вы можете видеть, есть событие в списке на май и событие на июнь.

Я попытался создать функцию фильтра, также поиграл с циклами, чтобы заставить его работать, но ничего не получалось.В примерах я заметил, что лучший способ сделать это - создать пользовательский фильтр Angular, но, поскольку я довольно новичок в AngularJS, я очень растерялся, когда речь заходит о внедрении этого месяца выпадающего фильтра.

Мне очень любопытно, если в AngularJS можно создать простой фильтр, который может фильтровать эти данные по выпадающему списку за месяц.

Answer 1

Вам просто нужно model при выборе tag, и тогда вы можете filter данные о ваших событиях на основе выбранного значения.

Вы можете использовать директиву ng-change для запуска функции фильтра каждый раз, когда в * 1011 выбрано другое значение

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>