在AngularJS中使用模板和过滤

Question

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' 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.

Answer 1

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.

http://ionicframework.com/docs/api/directive/onSwipeLeft/