Am retrieving data from my server in the format below
[{id: 1, title:"hello world", date:"2014-10-11",location: "The Room"},{id: 1, title:"hello world2", date:"2014-10-11",location: "The Room"}, {id: 1, title:"hello world3", date:"2014-10-11",location: "The Room"}]
Am try to display the data in my view like this
I tried using the example here How can I group data with an Angular filter? in the answer by @Plantface, but instead the data is displayed in my view like this
hello world3
2014-10-11
hello world3
2014-10-11
The date seems to be repeating when is should render once. Am i missing something?
The View
<script type="text/ng-template" id="schedule.html">
<ion-view title="Schedule">
<ion-content>
<ion-list ng-repeat="date in datesToFilter() | filter:filterDates">
<div class="item item-divider">{{ date.date }}</div>
<ion-item href="#/tab/schedule/{{event.id}}" class="event item-icon-right" ng-repeat="event in events | filter:{date: date.date}">
<span class="time">{{ event.startstamp }}</span>
<span class="title">{{ event.title }}</span>
<i class="icon ion-chevron-right"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
The Controller
function($rootScope, $scope, $q, API, $data, $window) {
$scope.events = $data.events;
var indexedDates = [];
$scope.datesToFilter = function() {
indexedDates = [];
return $scope.events;
}
$scope.filterDates = function(event) {
var isNew = indexedDates.indexOf(event.date) == -1;
if (isNew) {
indexedDates.push(event.date);
}
return isNew;
}