I'm pretty new to Angular, and I've run into an issue. I'm hoping that there is an easy way to solve this problem.
Basically, I have a list of Appointments that I retrieve from the server.
$scope.appointments = [{starts_at: "2015-1-1", name: "First"}, {starts_at: "2015-1-1", name: "Last"}, {starts_at: "2015-1-2", name: "Next Day"}];
Now I'd like to show these appointments in a list. I decided that I could use ng-repeat
+ filters for this, but now I'm stuck.
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class='box'>
<div class="list list-inset" ng-repeat="appt in appointments | filter:????>
<div class="item" ng-click="openAppointmentModal(appt)">
<span>Appt {{appt.name}}</span>
<span>Starts at {{appt.starts_at}}</span>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
I wasn't sure if I could use the built-in filterFilter
to do this, so I ended up writing my own filter filterDateFilter
, which takes in an array, a property name, and what date you want to filter for. I can then write something like ng-repeat='appt in appointments | filterDate:starts_at:curDate'
where curDate
is defined by $scope.curDate = new Date()
in the controller.
Phew. That works, but only for filtering for whatever $scope.curDate is defined as.
Now, I want to the user to be able to swipe to the previous/next days, and show only the appointments for that day. I assume I'd have to move the <ion-slide>
to a template, but I'm not sure where to go from there. What are my next steps?
Sorry for the long post and detailed explanation, but I didn't want to just throw up a question and show no previous effort.
I think that instead of ion-slide, you can use the ionic on-slide-left
and on-slide-right
directives to call a function you define in your controller which increments or decrements $scope.curDate
by 1. This seems a simpler alternative to me than simulating infinite slides.