I am currently working on creating an event listing using Angular and I am facing a challenge. I want to dynamically add a year and month element between event listings based on changes in the year/month.
<body ng-controller="CalendarController">
<div ng-repeat="event in events">
<div ng-if="$first || year != prevYear ">
{{event.date | date: 'yyyy'}}
</div>
<div>
{{ event.name }}
</div>
<div>
{{ event.date | date: 'shortTime'}}
</div>
</div>
</body>
In this code, if the element is the first one or if the year from the previous event differs from the current event's year, it will be preceded by a year element (and eventually the same for month).
(function(){
var app = angular.module('a2Events', []);
app.controller('CalendarController', function($scope, $http) {
$http.get('../data.json')
.success(function(data, status, headers, config) {
angular.forEach(data, function(value, key) {
value['date'] = Date.parse(value['date']);
});
$scope.events = data;
})
.error(function(data, status, headers, config) {
console.log(status);
});
});
})();
Here, I am converting the date string into a date object retrieved from a JSON file containing a list of events sorted by date. My goal is to extract the year and month separately from the date objects (using $index) and use an ngif to conditionally add year/month elements where needed. However, I am having trouble accessing the date object as required. Any suggestions or alternative methods would be greatly appreciated.
The desired output should be:
2015
July
event1
event2
August
event3
event4
2016
January
event5
etc